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WEB DESIGN #® 
腾讯 高 级 网 页 设计 师 等 叶 革 


这 不 是 一 本 高 大 全 的 网 页 教科 书 ， 这 是 一 剂 面 对 创意 困境 、 视 多 困境 的 现实 处 万。 它 从 观 仿 
上 修正 了 多 年 的 网 页 设计 陋习 ， 为 视 锅 市 来 新 颖 形式 。 众 多 实际 案例 和 优秀 作品 员 析 让 你 快 
速 掌握 方法 ， 即 学 即 用 。 





数字 版 权 声 明 


图 灵 社 区 的 电子 书 没有 采用 专 有 客 
尸 问 ， 您 可 以 在 任意 设备 上 ， 用 自 
Sy 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 民 知 
和 壳 悟 ， 与 我 们 共同 保护 和 基 识 产权 。 


如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 尸 实 施 包 括 但 不 限于 关闭 该 
帐号 每 维权 措施 ， 并 可 能 退 究 法 律 


贡 任 。 





晋 小 放 


一 个 网 页 设计 手艺 人 ， 人 入 行 早 年 曾 与 朋友 一 同 组 建 
工作 室 ， 经 历 过 两 年 不 太 专业 的 野生 设计 生活 ， 后 
被 圈养 于 国内 游戏 公司 。 从 三 位 一 体 的 技术 混沌 派 
到 团队 合作 的 专业 分 工 体系 ， 从 单纯 的 视觉 执行 到 
系统 的 品牌 包装 ， 从 标准 化 的 PC 端 网 页 到 多 样 化 的 
移动 设备 网 页 …… 经 历 了 不 同时 期 、 不 同形 式 的 网 
页 视 沉 潮流， 至今 仍然 执迷不悟 地 驻足 于 网 页 设计 
阵营 ， 始 终 关 注 网 页 形式 变化 ， 未 曾 改 嫁 。 在 这 六 
年 的 网 页 设计 工作 中 积累 了 一 些 值得 分 享 的 经 验 ， 
部 分 文章 在 网 络 上 获得 了 设计 同行 的 认可 和 大 量 转 
发 。 现 效力 于 腾讯 游戏 官方 设计 团队 TGideas 任 高 
级 视 党 设计 师 。 


E-MAIL.: ejin@tencent.com 
站 酷 博 客 : 1visual.zcool.com.cn 
微 博 : weibo.com/evisual1 





媒体 联合 推荐 
a oadesion 国 


团队 联合 推荐 


人 15UX SA OO 


we riane pe ite) 








网 页 视 营 设计 创意 拓展 与 快速 表现 


OCHREATIVITY EXPANDING AND FAST PERFOAMMANMGE OF WEBPAGE'S VISUAL DESIGN 


普 小 彦 编著 


风 出 版 社 


™ 


也 攻 


JP 
| 


-0 


i EE 


写 这 份 前 言 的 时 候 ， 我 并 不 六 确定 这 本 书 是 含 能够 出 版 。 不 论 结果 如 何 ， 都 
十 分 感谢 策划 大 成 的 敦 励 ， 让 我 一 直 坚 持 整 理 完 成 。 


2011 年 6 月 因为 几 篇 天 于 "快速 打造 网 页 形式 感 " 的 系列 文章 得 到了 许多 同行 
| 


的 关注 ， 大 成 在 站 酷 上 找到 了 我 ， 并 无 写 书 经 验 的 我 ， 设 想 厦 只 需 简 单 地 将 几 篇 
现 有 文章 集合 成 册 残 可 以 交 关 ， 于 是 便 欣 然 答应 了 ， 但 后 来 友 现 ， 完 善 工 作 并 不 


比 最 初 的 起 稿 来 得 容易 …… 
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1593446 人 
89 入 分 
8293%%e / 36 关注 





展开 详细 资料 国 


首先 ， 对 于 网 页 设计 来 说 ， 不 论 是 技术 还 是 审 壬 都 是 一 个 不 断 更 新 迭代 的 过 
程 ， 当 时 认为 不 错 的 作品 现在 看 起 来 并 不 十 分 有 特色 。 特 别 是 对 专题 的 形式 感 来 
说 ， 布 局 的 形式 感 在 于 它 的 出 其 不 意 ， 如 果 使 用 过 于 频繁 也 便 失去 了 它 的 效果 。 


其 次 ， 由 于 个 人 作品 的 限制 ， 许 多 案例 的 万 法 上 值得 举证 ， 但 终 合 评定 上 来 


说 ， 它 不 算是 一 个 完美 的 作品 。 


第 三 ， 话语 空间 ,网络 上 的 文章 如 果 友 现 问 题 ， 友 布 后 也 能 及 时 更 正 ， 而 纸 
质 出 版 是 一 次 性 的 成 稿 ， 出 版 后 的 修正 难度 束 很 大 。 


还 有 ,在 整理 过 程 中 ,不 断 出 现 新 的 想法 ,所 以 不 断 添加 新 的 内 容 ,逐渐 友 现 ， 
原来 在 网 络 上 与 大 家 分 享 的 文章 在 本 书 中 所 占 的 比例 ， 几 了 乎 可 以 忽略 不 计 了 .…… 


最 重要 的 一 点 ， 纸 质 出 版 物 的 图 片 版 权 比 网 络 文章 限定 更 多 ， 人 在 案例 的 选择 
上 也 谨 小 慎 微 。 加 上 日 昔 工 作 的 压力 ， 这 一 系列 问题 也 让 我 在 写作 过 程 中 多 次 打 
了 退 虽 喜 。 到 这 里 ， 还 是 想 再 次 感谢 大 成 一 直 的 鼓励 。 


老 编 大 成 的 插队 回复 : 感谢 小 背 的 信任 ， 不 过 不 认同 " 没 编辑 瓯 没 这 本 书 "的 
说 法 ， 只 不 过 大 家 都 觉得 出 版 这 本 书 是 件 有 有 意义 的 事情 ， 并 肩 作战 到 搬 喷 了。 从 
编辑 这 个 门 外 人 来 看 ， 国 内 网 页 视觉 设计 与 10 年 前 相 比 ， 已 经 有 了 翻天 履 地 的 
变化 ， 很 多 网 页 作品 的 视 沈 设计、 体验 设计 已 经 是 国际 一 流水 准 ， 但 是 目前 国内 
原创 网 页 设计 图 书 还 大 都 停留 在 10 年 前 的 水 平 上 ， 远 远 沙 后 与 我 们 的 当前 设计 
真实 水 准 ， 个 中 缘由 这 里 不 深究 。 老 编 认为 ， 这 本 书 是 13 年 策划 生涯 中 遇 到 的 
最 好 的 一 本 网 页 视 竞 设计 书 ， 设 计 是 前 治 的 设计 ， 文 笔 是 通 透 的 文笔 ， 作 者 小 并 
文武 双全 ， 德 才 兼 备 ， 这 本 书 ， 错 不 了 。 
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一 定 要 先 看 看 这 里 


为 了 能 够 更 好 地 定位 和 阅读 本 书 ， 在 大 家 阅读 正文 之 前 ， 先 史 嗪 两 句 。 网 
页 设计 包含 着 很 多 万 面 的 内 容 : 网 页 前 端 开 友 、 网 页 平面 设计 、 界 面 UI 设计 、 
软件 使 用 、 用 尸体 验 …… 本 书 作为 一 本 速 食 的 网 页 设计 技法 手册 ， 它 很 难 履 功 
所 有 的 网 页 设计 领域 。 单 从 视 竞 设计 来 分 ， 残 包含 了 : UI 设计 、 网 页 图 标 设计 、 
平面 设计 、 色 彩 搭配 、PS 技能 表现 等 等 。 而 这 本 书 主 要 对 哪些 内 容 进行 了 介绍 ， 
尼 又 适合 怎样 的 人 群 呢 ? 


为 什么 融 谈 形式 


一 是 行业 分 工 的 细 化 。 网 页 设计 师 从 早年 的 综合 性 工作 中 分 化 出 来 ， 形 成 
了 相对 独立 的 专业 岗位 ， 网 页 设计 也 不 再 是 单纯 的 软件 应 用 ， 它 衍生 出 了 许多 
独立 的 研究 万 向 ， 而 形式 感 的 表现 则 成 为 视 沉 设 计 师 在 主要 日 常 工 作 之 一 。 这 
也 预示 着 网 页 设计 行业 的 "改版 "”。 只 有 在 专业 领域 上 更 强 ， 才 能 强 强 合作 从 而 
帮助 其 他 具体 产品 的 展示 、 营 销 、 忽 利 等 。 











其 次 随 着 时 代 的 友 展 ， 网 页 设计 更 接近 于 一 | 艺术。 网 页 技术 的 友 展 为 网 
页 视觉 亏 术 提 供 了 更 灵活 和 宽阔 的 表现 空间 ， 而 视 竞 表现 上 的 需求 也 推动 着 网 
页 技术 进一步 友 展 。 


网 络 带宽 和 硬件 的 发 展 为 网 页 提供 了 使 用 更 大 图 片 、 动 画 甚至 视频 的 权利 ， 
而 这 些 也 为 视觉 设计 师 提供 了 更 多 表现 的 空间 ， 并 以 此 来 帮助 网 页 信息 在 快速 
阅读 的 今天 占有 一 席 之 地 。 与 此 同时 ， 用 户 对 网 页 使 用 的 经 验 沉淀 ， 让 视觉 无 
需 花 更 多 的 表现 向 用 户 告知 基础 交互 行为 ， 因 此 也 可 以 余下 更 多 的 精力 回 到 视 
觉 形式 上 来 ， 运 用 色彩 和 结构 来 更 好 地 为 网 页 信息 服务 。 

















当然 矛盾 是 持续 存在 的 ，| 旧 规 窍 的 打 夏 也 预示 着 新 规矩 的 开始 。 面 对 信息 
的 泛 浊 ， 如 何 5 起 用 户 对 当前 信息 的 关注， 网 页 的 第 一 视 竞 在 其 中 显得 尤为 重 
要 ， 它 同样 需要 形式 表现 的 玖 导 和 刺激 。 














另外 多 终端 用 户 屏幕 ( 主要 是 各 种 移动 设备 ， 手 机 、 平 板 等 ) 的 出 现 ， 它 
让 网 页 视觉 设计 师 不 得 不 重新 定义 原 有 的 视 党 规范 。 这 些 变化 都 趋 使 着 设计 师 
对 新 形式 的 渴望 与 进一步 的 探索 ,让 我 们 一 起 来 迎接 吧 。 


A| adhamdannaway 


Get in touch with me! Featured here and there: 





我 是 一 个 被 圈养 的 网 页 设计 师 


圈 乔 当然 不 是 什么 光 落 的 称号 ， 但 它 标 志 厦 一 个 设计 师 的 独立 开 友 和 制作 


一 和 
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圈 乔 的 设计 师 ， 大 多 处 于 分 工 细致 的 制作 环境 ， 我 们 首先 抛 开 后 全 和 前 痛 
的 程序 开 友 ( 因为 设计 和 程序 的 分 工 是 大 部 分 网 页 设计 团队 的 基础 以 构 ) 。 除 
此 之 外 ， 一 个 圈 错 型 的 设计 师 团 队 ， 它 拥有 一 个 需求 交 旦 策划 ， 将 抽象 的 产品 


目标 转化 成 具体 活动 内 容 ， 并 绘制 成 简易 的 网 页 交互 稿 ， 网 页 设计 通过 交互 稿 
进行 页 面 设 计 。 


其 次 在 圈 乔 的 团队 中 ， 产 品 一 般 有 一 个 原画 团队 ， 虽 然 这 些 原画 并 不 直接 
服务 于 网 页 设计 ( 它们 可 能 是 产品 开 友 过 程 中 的 草 入 原画 文件 ) ， 但 还 是 给 网 
页 视 苋 表现 市 来 很 大 的 帮助 。 


第 三 ， 还 可 能 有 一 个 动画 制作 团队 ， 帮 助 实现 网 页 设计 上 的 动画 需求 。 在 
一 些 设计 团队 ，Flash 动画 设计 和 页 面 设计 是 由 同一 个 设计 师 完成 的 。 另 外 ， 
对 于 一 些 大 型 的 门户 平台 类 网 站 可 能 还 会 配 有 专业 的 用 户 体验 和 调研 专员 或 小 


和 入 和 
组 等 等 
< 电 ==o。 


除了 以 上 几 个 大 的 分 工 之 外 ,一 些 网 页 设计 团队 还 有 会 编辑 ， 在 网 页 设计 
和 程序 开 友 完成 后 负责 上 传 具体 的 资料 内 容 。 


在 最 初 工作 的 几 年 ， 我 也 经 历 过 设计 、 动 画 、 切 片 三 位 一 体 的 人 生 。 在 一 
些 团队 里 ， 新 来 的 毕业 生 或 实习 的 同学 会 专门 负责 抠 图 、 改 尺寸 等 工作 ， 为 主 
设计 师 节 省 了 大 量 的 时 间 当然 我 也 同样 经 历 过 那个 每 日 只 改 尺 寸 的 设计 生活 。 
就 像 每 个 发 型 师 都 得 从 洗 头 小 弟 干 起 …. 好 啦 ， 我 们 是 设计 师 不 是 洗 剪 吹 啦 ， 
不 过 话说 回来 ， 现 在 光 勇 个 脑袋 要 你 个 590 的 也 不 是 没有 ， 史 .看 我 们 是 如 何 
定位 和 看 待 自己 的 手艺 啦 ， 扯 远 了 ， 回 来 回来 。 
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话 六 这 些 受 得 住 大 团队 圈养 的 主 儿 ， 一 般 有 一 定 的 实力 ， 因 为 大 团队 提供 
着 丰 厚 的 资源 ， 也 给 出 了 许多 标准 化 的 限定 ， 所 以 有 人 这 圈养 的 设计 师 在 一 些 
制作 的 独立 性 和 创意 的 狼 性 上 不 如 一 些 野 生 派 的 优秀 设计 师 。 这 点 我 们 并 不 否 
认 ， 但 圈 错 的 万 式 还 是 成 为 了 大 部 分 企业 的 常态 架构 ， 因 为 它 为 产品 的 网 页 设 
计 市 来 了 可 控 的 便捷 。 而 大 部 分 的 设计 束 业 者 也 处 于 这 样 一 个 有 一 定 基础 分 工 
的 设计 团队 中 。 而 如 何在 圈养 的 团队 中 生存 得 更 好 ， 让 我 们 的 设计 在 众多 的 标 
准 中 胶 疾 而 出 或 许 本 书 的 一 些小 小 万 法 能 够 对 同样 属于 圈养 的 同胞 有 上 所 帮助 。 
当然 ， 本 书 的 读者 不 仅 限 于 “圈养 "设计 师 ， 丢 生动 物 " 同 样 适用 ! 





这 不 是 一 本 高 大 全 的 教科 书 


本 书 内 容 不 涉及 任何 网 页 前 端 程序 开 友 或 PS 操作 步骤 ， 也 没有 精深 复杂 
的 平面 构成 和 色彩 搭配 理论 。 这 是 一 本 速 食 的 设计 创意 与 技巧 手册 。 当 然 我 们 
很 难 承诺 仅 通 过 本 书 便 马上 能 从 菜鸟 转身 成 网 页 设计 大 师 。 我 们 应 当 苯 重 高 大 
全 的 理论 基础 ， 也 相信 所 有 的 成 功 都 不 是 一 践 而 残 的 。 本 书 可 以 帮助 有 一 定 基 
础 的 网 页 设计 初学 者 或 在 职 者 ， 在 遇 到 设计 创意 手 贷 时 ， 能 够 在 较 短 的 时 间 内 
解决 设计 上 的 创意 和 视觉 形式 感 的 问题 。 不 论 是 应 对 紧急 的 工作 需求 或 是 求职 
面试 都 能 够 给 观 者 一 个 新 矣 的 视觉 表现 。 


这 是 一 剂 速效 救 心 丸 ， 行 气 活血 、 祛 痰 止痛 。 你 在 为 网 页 视 竞 的 平淡 无 奇 
感到 困扰 嘛 ?你 在 为 大 量 的 专题 需求 感到 疲惫 嘛 ?你 正 处 于 每 个 月 那儿 天 的 创 
意 瓶 劲 期 嘛 ? 圈 圈 叉 医 院 余 主任， 专注 治 创 二 十 载 ， 为 您 推荐 ! 本 书 将 我 们 日 
单 设 计 思 路 与 网 页 技术 和 审美 友 展 结合 ， 并 将 万 法 形象 地 归纳 ， 入 口吻 、 剂 量 
小 、 起 效 快 ， 谁 用 谁 和 道 …… 好 了 好 了 ， 表 开玩笑 束 要 被 开 除了 ， 我 友 斩 要 好 
好 写 书 认真 做 人 的 。 


如 果 一 定 要 为 本 书 做 个 比喻 的 话 ，“ 速 效 救 心 丸 " 这 个 称号 应 该 合适 。 它 并 
非 复 杂 而 长 期 的 理论 慢性 治疗 ， 它 是 实际 工作 实践 的 经 验 忌 结 ， 它 针对 我 们 日 
常 遇 到 的 现实 问题 并 提出 解决 万 案 。 


由 于 个 人 的 工作 类 型 和 经 验 的 限制 ， 书 中 还 是 有 许多 不 完善 的 地 方 ， 欢 迎 
各 路 同仁 指正 提 砖 ， 当 然 ， 为 了 不 被 乱 砖 提 死 ， 我 先 为 自己 竖 儿 道 结 界 防 身 ， 
以 备 不 时 要 赖 之 需 。 


日 常 的 活动 专题 更 需要 形式 感 


在 解释 专题 页 面 这 个 概念 之 前 ， 我 们 先 来 了 解 一 下 网 站 的 分 类 ， 因 为 一 个 
网 站 到 底 是 重信 息 索 3 引 、 重 交互 体验 还 是 重视 项 表现 必须 依 网 站 的 类 型 而 定 ， 
不 同 的 网 站 类 型 侧重 点 是 有 区 别 的 。 从 网 站 功能 上 ， 它 分 为 门 己 站、 平台 站 、 
品牌 站 、 专 题 站 等 。 
门户 站 负责 产品 资讯 建设 ， 它 拥有 对 搜索 引擎 的 友好 表现 和 完好 的 内 
容 文 持 ， 它 相对 更 注重 资料 的 索 5|。 
平台 站 残 像 一 个 网 络 市 集 ， 不 论 是 用 户 端 还 是 产品 并 都 可 以 在 这 里 传 
播 资 讯 ， 并 进行 频繁 的 互动 ， 它 相对 更 注重 用 户 的 交 电 体验 。 
品牌 站 则 像 外 交 官 ， 它 主要 通过 视 党 包 浅 传 达 产 品 概 念 ， 随 着 技术 的 
发 展 , Flash、HTML5、 视 频 、 多 媒体 因 其 生动 的 展示 形式 成 为 了 品 
牌 站 的 主要 表现 手段 ,对 于 品牌 站 的 建设 来 说 ， 设 计 师 在 创意 和 视 狗 
表现 上 都 有 极 大 的 空间 。 
专题 活动 站 作为 精准 宫 销 的 重要 形式 ， 为 产品 的 针对 性 推广 做 出 了 巨 
大 贡献， 早年 受到 市 宽 的 影响 表现 形式 较为 单一 ， 现 在 真正 揭 开 了 广 
告 的 本 来 面目 ， 强 烈 的 视 党 表现 成 为 了 它 最 重要 的 特征 。 它 束 像 战争 
中 的 突击 队 ， 精 准 、 迅 猛 、 有 力 ! 
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门户 站 、 平 台 站 、 品 牌 站 根据 产品 的 结扎 更 换 频 繁 ， 多 为 半年 、 一 年 甚至 
两 三 年 更 换 一 次 。 而 活动 专题 因为 服务 于 产品 活动 ,所 以 上 站 时 间 都 相对 较 短 ， 
多 为 一 个 星期 到 一 个 月 左右 ， 但 在 数量 上 较 其 他 类 型 的 网 站 相对 更 多 。 如 一 款 
进入 稳定 期 的 游戏 产品 ， 它 的 专题 页 面 一 个 月 的 数量 通 党 在 4 ~ 8 个 左 石 ， 
公测 的 攻坚 期 则 更 其 ， 通 常 每 天 同时 在 线 的 活动 在 五 到 十 个 左右 。 所 以 专题 页 
面 的 设计 是 在 职 设 计 师 最 常 遇 到 的 网 页 设计 类 型 。 





我 们 知道 专题 的 设计 是 通过 它 的 精准 、 迅 猛 、 有 力 来 服务 于 营销 活动 并 最 
终 服 务 于 产品 的 ， 所 以 这 残 需要 设计 师 在 处 理 这 些 日 弟 专 题 时 主题 要 突出 、 设 
计 速 大 要 快 、 视 觉 要 惊艳 。 这 也 便 是 本 书 这 十 个 万 法 所 要 解决 的 问题 。 本 书 以 
视 竞 设计 中 的 形式 感 为 主线 ， 不 以 网 站 的 索引 设计 或 用 户 的 交互 体验 设计 为 主 
线 ， 是 因为 每 个 类 型 的 网 站 设计 的 侧重 点 不 同 。 关 于 网 页 的 索引 设计 或 是 交互 
体验 设计 ， 不 是 本 书 的 讲述 重点 ， 好 好 把 视 竞 形式 表现 技巧 说 清晰 也 算是 笔者 
有 限 能 力 下 的 小 小 愿望 。 
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这 本 书 适 合 我 吗 ? 


因为 工作 和 资源 的 天 系 ， 书 中 动手 制作 的 案例 多 是 游戏 网 页 ， 但 员 析 部 分 
的 案例 类 型 较 多 元 化 。 思 路 与 方法 可 以 举一反三 、 灵 活 运 用 ， 所 以 它们 同样 适 
用 于 其 他 产品 的 专题 网 页 设计 ， 一 些 思 路 和 方法 甚至 适用 于 广告 和 海报 等 视 帝 


设计 。 


所 以 本 书 的 读者 是 网 页 设计 师 ， 包 合 狭 义 的 、 广 义 的 、 较 乔 的 、 野 生 的 ， 


以 及 网 站 开 上 友 其 他 环节 需要 了 解 网 页 视觉 设计 的 人 员 ( 如 用 户 体验 设计 师 、 前 
端 页 面 开 肥 人 员 等 ) 。 


作品 不 甚 完 美 , 权 当 抛砖引玉 。 网 页 设计 随 厦 审 宽 的 提高 以 及 技术 的 嘻 新 ， 


表现 形式 也 在 不 断 变 化 ， 加 以 每 个 人 对 美 丑 评定 不 一 ， 如 果 从 多 维度 来 评定 书 
中 的 案例 ， 它 们 可 能 不 能 算是 完美 作品 ， 这 里 残 当 是 为 了 这 明 技 巧 和 万 法 进行 
的 坚 试 ' 抛 砖 "。 由 于 时 间 的 关系 ， 一 些 较 早期 的 作品 也 多 少 有 些 不 够 成 熟 或 不 
符合 当前 流行 趋势 的 地 方 也 请 大 家 多 体谅 ， 如 果 这 些 方法 能 够 为 大 家 拓展 思路 
并 信 此 “5 引 玉 "也 便 是 我 莫大 的 菏 幸 了。 


终于 忠明 完了 ， 算 是 能 够 比较 安心 地 和 您 一 同 翻 书 打开 语 荃 了。 


版 权 声 明 


为 了 顺利 展开 主题 ， 本 书 在 编写 过 程 中 参考 了 并 截取 了 部 分 国内 外 著名 网 
站 的 功能 和 效果 ， 人 在 此 感谢 原作 者 的 创意 和 设计 为 本 书 提供 了 参考 。 由 于 部 分 
内 容 来 源 于 互联 网 ， 因 此 无 法 一 一 查 明 原创 作者 ， 无 法 一 一 准确 列 出 出 处 ， 窜 
请 谅解 。 如 有 内 容 引 用 了 贵 机 构 、 贯 公司 或 您 个 人 的 作品 或 技术 资料 却 没有 注 
明 出 处 ， 欢 迎 及 时 与 出 版 社 或 作者 本 人 联系 ， 我 们 将 会 在 博客 或 相关 媒体 中 予 
以 况 明 、 澄 清 或 致歉 ， 并 会 在 下 一 版 中 予以 更 正 及 补充 。 


特别 鸣谢 


感谢 所 在 团队 腾讯 TGideas 一 直 以 来 的 培养 和 帮助 ， 书 中 有 许多 经 验 分 
享 也 来 源 于 集体 的 智慧 和 团队 成 员 间 相互 的 灵感 激 友 。 此 外 十 分 感谢 我 们 的 
Leader 李 若 几 为 团队 成 员 争 取 了 更 多 的 话语 权 和 设计 空间 ， 才 使 我 们 有 机 会 
不 断 突 破 设 计 的 局 限 ， 让 网 站 设计 表现 更 加 生动 ， 并 让 设计 有 效 地 辅助 产品 的 
上 友 展 。 也 感谢 每 一 位 TGideas 的 成 员 ， 努力 工 作 拼 命 玩 ， 是 大 家 的 工作 态度 ， 
也 是 团队 给 设计 师 和 设计 作品 最 好 的 礼物 。 
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你 可 能 已 经 注意 到 本 书 大 体 的 结构 ， 每 个 万 法 的 架构 基本 一 致 ， 叱 分 为 说 
说 、 想 想 、 看 看 、 做 做 "四 个 部 分 对 万 法 进行 诞 释 、 解 构 、 分 析 、 芝 试 ， 在 阅 
读 过 程 中 大 和 家 可 以 留心 ， 或 根据 目 己 的 需要 进行 针对 性 的 翻阅 。 


可 
笠 


四 个 结构 的 样式 如 下 。 





人 砂 动手 试 试 
做 








网 页 形式 感 与 专业 主义 


“形式 感 " 在 近 两 年 的 网 页 视 完 设计 圈子 中 大 概 是 最 常 出 现 的 词汇 之 一 。 


关于 小 诗 的 这 本 书 的 书 名 ， 许 多 朋友 谈 起 时 会 说 ， 是 人 否 市 有 一 些 类 似 " 形 
式 主 义 、 形 式 化 "的 凤 意 色彩 ， 在 感受 上 相对 偏 主观 ? 其 实 克 "形式 感 "这 个 词 
的 本 意 来 说 ， 它 的 确 是 由 主观 意识 出 友 的 设计 表现 ， 然 而 任何 一 种 输出 和 表达 
都 是 经 过 个 人 的 意识 和 知识 梳理 形成 的 ， 从 一 定 意义 上 讲 ， 不 论 是 谈 形式 设计 
还 是 谈 体 验 设 计 ， 其 实 都 是 根据 主观 认识 而 最 终 输 出 的 形式 表现 ， 不 同 的 只 是 
正确 的 形式 和 不 够 正确 的 形式 。 


何谓 正确 的 形式 ? 如 何 能 更 接近 正确 的 形式 ? 专业 的 网 页 视觉 形式 关联 
了 整体 营销 的 需要 、 信 息 内 容 的 传达 和 网 页 技术 的 更 新 以 及 审 壬 标准 的 变化 。 
书 中 的 几 个 万 法 论 综 合 了 这 些 基础 要 素 ， 并 将 其 通过 吻 理 解 、 可 操作 的 表达 方 
式 进行 整理 输出 。 因 此 ，“ 形 式 感 "作为 视 沉 评定 的 第 一 感受 ， 逮 渐 成 为 了 设计 
师 们 在 日 常 工作 交流 中 的 常用 词汇 。 


形式 感 ” 一 词 的 广泛 使 用 ， 在 另 一 万 面 是 基于 网 页 设计 专业 化 分 工 的 ， 网 
页 设计 在 最 初 的 类 计算 机 学 科 的 基础 上 延伸 出 了 它 独 有 的 艺术 性 、 体 验 性 、 互 
动 性 等 专业 体系 。 它 伴随 着 "网 页 视 宫 设计 师 " 这 一 职业 称谓 成 为 了 艺术 类 分 支 
中 最 常用 到 的 沟通 词汇 。 从 一 定 意义 上 讲 ， 网 页 视觉 "形式 感 "的 出 现 也 标志 着 
网 页 视 嘻 设计 的 进一步 专业 化 。 与 此 同时 ， 我 们 也 期 待 着 网 页 视 帝 设计 在 整个 
网 络 化 浪潮 中 有 更 多 优秀 的 、 慰 艳 的 形式 表现 。 

记得 在 两 年 前 ， 我 们 的 设计 作品 在 行业 内 具备 了 一 定 的 影响 力 ， 因 为 行业 
属性 的 绿 故 ， 天 注 用 户 体 验 的 同时 ， 团 队 在 形式 感 打造 方面 经 单 有 出 色 的 内 容 
产 出 ， 欣 喜之 余 ， 也 开始 考虑 如 何 能 把 这 些 出 色 的 设计 经 验 沉 泻 下 来 ， 形 成 万 
法 论 ， 长久、 良性 的 支持 团队 工作 ， 同 时 进一步 提升 团队 效率 。 


市 着 这 个 目的 ， 便 拉 上 团队 骨干 小 计 一 起 探讨 这 个 问题 ， 让 人 惊讶 的 是 ， 


小 庶 针 对 形式 感 打造 方法 的 计划 早已 启动 并 已 经 归纳 了 一 些 可 行 的 设计 方法 ， 


于 是 我 们 利用 两 个 月 的 时 间 ， 进行 反复 的 碰撞 ， 收 集 了 大 量 行业 资料 ， 并 结合 
实战 项 目 ， 完 成 了 打造 形式 感 课程 的 内 部 开 肥 ， 后 来 成 为 了 团队 的 招牌 课程 ， 
获得 了 腾讯 学 院 、 互 动 娱乐 事业 群 学习 组 织 、 腾 讯 设 计 通 道 等 组 织 颁 发 的 优秀 
课程 奖 。 这 些 万 法 吸收 并 结合 了 摄影 、 建 筑 、 绘 男 等 知识 ， 将 常见 的 形式 感 打 
造 万 法 用 深入 浅 出 的 万 式 进行 了 这 明 ， 使 得 运 襄 、 策 划 、 美 术 相 天 工作 人 员 都 
能 够 简单 有 效 地 理解 设计 方法 。 部 分 技巧 友 布 在 互联 网 后 ,也 受到 很 多 相关 从 
业 人 员 的 学 习 和 认可 。 


得 知 这 些 亡 法 会 成 为 纸 质 书 出 版 后 ， 首 先 很 感激 出 版 社 对 于 我 们 专业 能 
的 认可 ， 更 感谢 这 其 中 的 关键 角色 小 主 ， 她 能 够 在 万 法 沉淀 的 过 程 中 ， 针 对 其 
内 容 进 行 反 复 和 迭代 与 优化 ， 并 退 求 尽善尽美 的 专业 态度。 


设计 是 一 门 需要 手 脑 并 用 的 学 科 ， 没 有 深刻 的 洞察 和 理论 文 返 而 单纯 追求 
形式 感 会 显得 如 此 浅薄 ， 其 奥义 在 于 真正 投入 思考 与 执行 ， 这 是 大 前 研一 所 强 
调 的 "不 断 学 习 ， 不断 思 考 ， 不 断 忌 结 " 的 专业 主义 精神 ， 也 是 设计 工作 独特 的 
魅力 所 在 。 





一 一 腾讯 游戏 官方 设计 团队 TGideas 设计 总 监 李 若 凡 
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网 页 设计 “速效 救 心 丸 ” 


这 几 天 花 了 点 时 间 看 完了 《形式 感 +》 这 本 书 ， 这 是 一 本 关于 网 页 设计 的 教程 ， 一 本 别具一格 风 
格 的 书 。 抛 弃 死 板 的 教材 模式 ， 以 一 种 轻松 愉快 的 万 式 讲解 网 页 设计 理论 、 万 法 与 案例 ,有 一 种 吸引 
力 使 我 看 下 去 。 更 能 贴近 读者 想 要 获取 的 万 法 、 知 识 点 ， 而 不 是 羔 述 某 种 理论 ， 此 书 值得 一 看 。 这 剂 
网 页 设计 的 "速效 救 心 妨 "确实 能 在 你 创意 枯竭、 审美 疲 芳 、 设 计 江 贷 的 时 候 好 好 补 上 一 口 回 神气 。 像 雾 
绰 天 出 现 的 一 股 清风 , 导 处 沙漠 时 手 握 的 一 文 纯净 水 , 当 身 为 网 页 设计 师 的 你 丑 陷 无 的 放 矢 的 苦恼 中 时 ， 
请 翻 翻 这 本 书 ， 也 许 会 产生 头脑 风暴 ， 也 许 残 能 把 杂乱 的 思绪 理 顺 ， 总 之 相信 你 确实 会 收获 不 小 。 


当前 的 网 页 设计 水 准 较 10 年 前 已 经 是 翻天 覆 地 的 变化 ， 相 比 现在 的 网 页 设计 水 准 ， 针 对 网 页 设 
计 的 教科 书 远 远 跟 不 上 脚步 ， 正 是 因为 缺少 像 作 者 这 样 ， 用 平实 的 言语 、 条 理 得 当 的 顺序 、 贴 近 时 代 
的 案例 ， 生 动 演绎 了 一 场 网 页 设计 的 艺术 制造 历程 。 《形式 感 +》 是 本 速 食 书 ， 这 本 书 把 设计 理论 和 
网 站 视 竞 设计 的 各 种 细节 一 一 对 应 ， 有 具有 很 强 的 可 操作 性 。 它 也 许 不 会 让 你 阅读 完 立 刻 成 为 网 页 设计 
的 大 师 ， 但 通过 "说 、 想 、 看 、 做 "这 几 点 出 友 ， 通 过 生动 地 举例 比拟 ， 绘 制 了 一 张 通 同 成 功 网 页 设计 
的 地 图 ， 让 读者 在 这 条 道路 上 走 得 踏实， 眼前 尽 是 明媚 光景 ， 既 有 "柳暗花明 又 一 村 ”的 惊喜 ， 更 有 " 售 
车 坐 受 栅 林 晚 " 的 民 碍 。 


设计 服务 于 用 户 ,用 户 体验 是 关键 ,如 果 一 个 网 站 设计 不 能 让 用 户 通过 轻松 愉快 地 点 击 获取 信息 ， 
那么 ,这 个 网 站 便 不 够 完美 ,看 完 这 本 工具 书 ,你 会 从 视 完 角度 了 解 个 中 绿 由 ,这 本 书 ,值得 细 细 品味 。 























一 一 ldsea Brand 上 海洋 滔 品 牌 设计 公司 创 晶 忌 监 、 忌 经 理 


弄 号 家 居 品 牌 创始 人 

































































网 页 设计 是 艺术 亦 是 科学 
优 机 大 元 坪 个 上 上 信 、 多 《 0 要素 丰 整理 L 沁 也 儿 (= 来 关押 为 于 如， 


话 工 了 元 其 1> 佐 也 一 仆 民 加 如 二 上 古代 科学 亡 韦 协 召 。 和 柔软 杰 已 苑 工 刀 儿 表现 过 二 所 民 、 实 践 
用 7/ 一 仆 吕 太 协 吾 。 


二 0 本 (二 、 沁 站 才 1{ 工 之 训斥 仁 气 前 未 《长 年 0 性 工 了 函 雪 千 二 经 共 从 口 得 大 思考 之 心得 在 沁 工 刀 L 大。 


若 \\ 宛 坊 个 才 一 上 L 工 、 彼 女 办 闪 术 家 0 柔软 这 上 上 科学 家 0 整理 力 在 同时 人 - 持 2T\\ 光 上 感 [ 大 。 
元 二 和 > 在 志 才 人 伍 二 0 元 气 清 儿 浴 书 人 类 二 世 、 中 国 最 新 0 卢 工 了 元 其 个 >O 三 想法 -二 接触 亡 六 多 
C3 


中 文 翻译 : 
我 一 向 认为 ， 优 秀 设 计 乃 是 将 众多 要 素 整合 归纳 成 要 点 的 产物 。 


网 页 设计 既是 一 门 己 术 亦 是 一 门 科学 ， 它 有 其 灵活 的 视 竞 表现 形式 ， 同 时 可 以 有 一 套 应 用 于 实战 
的 方法 论 。 


在 这 里 ， 小 讨 慷 慨 地 和 大 家 分 享 了 她 从 多 年 网 页 设计 经 验 中 所 收获 的 思考 与 心得 。 


作为 一 个 年 轻 设 计 师 ， 我 认为 艺术 家 的 百 变 灵动 和 科学 家 的 善于 归纳 都 在 她 身上 得 以 体现 ， 相 信 
有 忘 于 设计 的 人 通过 这 本 充满 朝气 的 书 ， 也 能 接触 到 国内 最 新 的 网 页 设计 思维 。 








一 一 广东 省 广博 报 堂 广告 有 限 公 司 总 经 理 
近藤 充 佳 ( MITSUYOSHI KONDO ) 




















团队 联合 推荐 


腾讯 游戏 从 10 年 前 的 默默 无 闻 到 目前 占据 整个 中 国 游戏 市 场 半 壁 江 山 ， 
这 来 自 于 整个 研 友 团队 和 友 行 团队 对 产品 各 个 细节 层 面 的 追求 及 坚持 ， 而 支撑 
我 们 一 直 以 饱满 的 热情 继续 下 去 的 ， 往 往 正 是 最 初时 单纯 的 对 游戏 行业 或 专业 
的 执着 和 热爱 。 很 高 兴 今 天 看 到 小 仆 作 为 我 们 众多 设计 师 中 的 典型 代表 ， 在 目 
身 的 学 习 摸 索 过 程 中 而 轧 结 的 这 样 一 本 书 ， 它 从 设计 创意 技巧 、 理 论 、 案 例 乃 
至 设计 师 的 目 身 价值 定位 等 层面 层 层 解析 ， 汇 聚 了 小 讨 从 业 以 来 在 游戏 页 面 视 
竞 设 计 方 面 的 个 人 经 验 所 在 及 设计 师 的 价值 感悟 ， 定 能 给 予 期 性 路 入 网 页 设计 
领域 的 新 人 或 者 是 其 他 设计 领域 的 资深 从 业者 非常 多 的 帮助 和 共鸣 ( 从 我 本 人 
来 过， 我 所 从 事 的 游戏 类 界面 设计 工作 ， 在 阅读 该 书 以 及 和 小 彦 的 交流 过 程 中 
获取 到 非常 多 共通 的 设计 法 则 和 创意 局 友 ) ， 相 信和 能 成 为 设计 师 木 边 的 弟 用 必 
备 书籍 之 一 ! 同时 期 望 能 市 动 国内 设计 领域 的 经 验 分 享 氛 围 ， 共 同 创建 更 加 民 
性 、 上 自由 、 诚 态 的 设计 交流 环境 ， 将 腾讯 游戏 的 影响 力 扩展 至 整个 行业 领域 ! 


一 一 腾讯 互动 娱乐 业务 系统 QQ 游戏 产品 部 ( GDC ) 设计 总 监 





刘刚 ( manrana ) 


推荐 奋斗 在 设计 第 一 线 的 小 伙伴 们 工作 之 余 仔细 研读 ， 书 里 都 是 笔者 的 柔 
身 经 验 和 心血 ， 很 有 诚意 。 





一 一 腾讯 用 户 研 究 与 体验 设计 部 ( CDC ) 总 经 理 陈 妍 ( Enya ) 


作者 新 铝 的 想法 非 党 及 时 ， 在 国内 网 页 设计 环境 大 同 的 情况 下 ， 需 要 更 多 
不 同 的 声音 ， 更 多 新 锐 的 创 晶 ! 














一 一 腾讯 电 商用 户 体验 设计 部 ( ECD ) 总 经 理 刘 轶 ( rayliu ) 


dc 





小 彦 透 过 目 己 的 细微 观察 和 个 人 经 验 分 析 ， 整 理 成 独特 的 方法 论 与 众 同 
乐 ， 令 人 喜 舞 。 国 内 需要 更 多 像 她 那样 主动 推动 设计 的 传道 人 ! 





一 一 腾讯 社交 用 户 体验 设计 ( ISUX ) 总 经 理 Jonathan Wong 


推荐 


推荐 


媒体 联合 推荐 


小 主 之 前 在 站 酷 友 表 的 系列 设计 文章 受到 了 设计 师 的 热情 追 读 ,这 次 成 书 
后 ， 更 是 进一步 系统 化 地 规整 了 内 容 。 没 有 枯燥 的 理论 知识 ， 只 有 好 学 好 用 的 
私家 绝招 。 虽 然 名 为 形式 感 ， 但 其 中 包 合 了 从 思考 万 式 到 实现 手段 的 全 流程 引 
导 。 读 者 完全 可 以 举一反三 ， 掌握 到 流行 的 设计 手法 ， 并 把 它们 立刻 应 用 到 日 
常 工作 中 。 代 表 小 计 在 站 酷 的 百 万 人 气 和 粉丝 们 ， 辣 奋战 在 网 页 设计 一 线 的 设 
计 师 们 推荐 。 











站 酷 网 主编 纪 晓 亮 


























书 中 的 几 篇 干货 文章 优 设 网 曾 推荐 过 ， 吸 引 了 很 多 网 页 设计 师 的 追捧 学 
习 。 作 者 对 网 页 形式 分 析 独 到 ， 语 言 深入 浅 出 ， 是 一 本 有 趣 而 实用 的 设计 书 。 


一 一 优 设 网 优 没 可 


《形式 感 》 一 书 由 浅 入 深 地 向 大 家 讲述 了 一 些 网 页 设计 的 方法 和 理念 ， 并 
且 例 举 了 作者 自己 积 轩 的 优秀 案例 。 以 设计 师 的 杀身 经 历 向 大 家 言传 身 教 ， 这 
是 一 件 很 了 不 起 的 事情 ， 因 为 这 同时 证 明了 作者 在 网 页 设计 这 行 久 经 沙场 却 仍 
然 岂 立 不 倒 ， 并 依然 有 具备 大 步 流星 的 正 能 量 。 如 果 我 还 是 当年 那个 为 设计 稿 而 
苦恼 的 设计 师 ， 那么 ， 我 一 定 不 会 错过 这 本 书 。 


一 一 优 艺 客 创始 人 韩 雪 冬 


相 比 较 ， 这 是 一 本 我 更 建议 广大 准 网 页 设计 师 看 一 看 的 书 ， 书 中 很 多 精彩 
的 表现 手法 和 实例 ， 对 于 当前 技术 和 想法 的 提高 有 很 大 帮助 ， 对 于 那些 正人 处 
在 族人 须 期 ， 却 藻 于 无 法 突破 的 设计 师 也 非常 适用 。 网 页 设计 友 展 瞬息 万 变 ， 也 
包罗 万 象 ， 设 计 师 不 应 刻意 追求 某 种 固定 或 流行 的 形式 ， 适 合 的 、 感 党 对 了 才 
最 重要 ，《 形 式 感 +》 一 书 贴切 、 生 动 地 阐述 了 这 一 理念 。 


网 页 设计 师 联盟 主编 江 六 八 





友情 推荐 


这 本 书 是 对 网 页 设计 日 常 工作 经 验 的 提 炬 和 点 化 ,语言 形式 轻松 ， 入 口 易 消化 ,功效 快速 直接 ， 


对 于 网 页 视 党 设计 的 从 业者 来 说 相当 合适 阅读 。 














一 一 巨人 网 络 副 总 裁 彭 程 
书 中 许多 网 页 版 式 方法 结合 了 现代 网 络 撤 术 的 友 展 ， 越 过 传统 的 边界 ， 走 过 固化 的 荣 区 ， 是 
一 本 有 前 瞻 性 的 设计 书 ， 强 烈 推荐 ! 


一 | 
co 


一 一 漫画 家 郭 斯 特 








一 一 


虽然 我 不 是 做 网 页 的 ， 但 是 好 的 思路 往往 放 之 各 类 设计 领域 峭 可 用 。 里 面 的 许多 视觉 表现 他 
意 和 形式 对 于 设计 来 说 都 是 互通 瑟 用 的 ， 值 得 一 读 。 




















+ E Pe | 一 | 一 
青年 导演 壹 青 








向 单 实 用 的 工具 书 ， 朴 实 的 语言 让 我 很 容易 束 可 以 看 懂 .….. 




















和 名 职业 画师 阮 佳 











我 很 喜欢 作者 以 简单 、 幽 黑 的 语言 来 表达 对 于 设计 的 理解 ， 让 我 对 网 页 设计 有 了 更 深层 次 的 
领悟 ， 无 论 是 内 行 还 是 外 行 都 能 在 这 本 书 中 汲取 到 目 己 想 要 学 习 的 内 容 而 得 到 提高 。 




















一 一 知名 职业 画师 周 沈 先 





本 书 的 网 页 设计 方法 宛 分 将 内 容 和 视 况 融会贯通， 对 于 品牌 视 竞 表现 和 网 站 策划 来 说 也 有 很 
不 错 的 局 友 性 。 

















一 一 Google 品牌 经 理 李 大 脑 








设计 是 一 件 需要 包容 的 事 ， 心 灵 的 空间 有 限 ， 物 质 的 欲 性 太 满 残 容 不 下 更 多 美感 。 三 年 前 第 


一 次 见 到 小 讨 的 时 候 ,我 歌 因 为 她 干净 的 内 心 和 五 彩 斑 壮 的 思想 力 而 震惊 。 作 为 本 书 的 第 一 个 读者 ， 


我 相信 你 将 会 有 和 我 一 样 的 阅读 体会 : 因为 纯净 的 世界 观 ， 你 的 心 会 装 下 整个 世界 的 设计 感 。 








一 一 腾讯 游戏 产品 经 理 陈 静 

















打造 视觉 形式 感 是 每 个 游戏 推广 视觉 包 妆 设计 师 必 由 之 路 ， 也 是 能 含 第 一 时 间 吸 引 玩 家 眼球 
的 必要 手段 ， 每 个 人 都 有 目 己 的 方法 。 而 书 中 介绍 的 几 大 方法 论 ， 通 过 实战 案例 详尽 介绍 了 作者 
对 各 种 形式 感 的 理解 以 及 如 何 实践 ， 效 果 立 年 见 影 。 


一 一 腾讯 高 级 视 党 设计 师 府 望 东 


这 书 是 在 高 强度 工作 环境 下 提取 出 来 的 ， 是 有 效 提 高 页 面 设计 效果 的 经 验 精华 。 





腾讯 高 级 视觉 设计 师 高 立 

十 个 提升 网 页 设计 形式 感 问 题 的 有 趣 万 法 。 每 一 个 都 通过 “说 、 想 、 看 、 做 "四 部 分 配合 详尽 案 

例 ， 以 轻松 的 行文 风格 为 我 们 娓 娓 道 出 。 作 者 将 其 丰 店 的 实战 经 验 分 享 给 广大 设计 师 ， 以 解决 实 
际 工 作 中 过 到 创意 思维 枯竭、 作品 表现 力 平淡 的 问题 ， 是 一 本 能 让 设计 师 释 放 无 尽 灵感 的 好 书 。 








推荐 


三 后 & 





01 


02 
03 


04 


全 O 









()O)2 
抄 现实 


抄 现 实 束 是 抄 效 现 实 中 的 物体 


(24 
圆 、 方 、 三 角 


重 年 的 七 巧 板 也 能 给 我 们 设计 的 灵感 


(O40 
断 辟 之 美 


因为 残缺 而 拥有 了 令 人 震撼 的 美 


OOU 
欲擒故纵 


内 容 多 也 能 看 起 来 很 简洁 


QSU 








刀 坤 大 挪移 


下 脑袋 让 世界 与 众 不 同 


104 附录 212 


杂志 版 式 A.214 


消除 平面 设计 边界 ， 向 杂志 版 式 学 习 。 一 个 视觉 设计 师 的 职业 世界 观 
| 一 一 关于 商业 视觉 设计 师 的 自 
我 定位 


B224 
| , O 网 站 建设 新 元 年 的 设计 趋势 


全 屏 大 视野 
不 做 1000 像素 小 切 糕 ， 还 给 砚 屏 六 视野 : GS ， 2 . S 


设计 中 的 好 有 爱 
ry = 
文子 衣 橱 


是 时 候 收 拾 一 下 那 长 篇 大 论 的 文字 了 


1/0O 
你 看 起 来 很 好 吃 


挑动 大 食 室 宇 们 的 食欲 


194 
钉 钉 钢 饥 


小 妆 饰 的 正 能 量 不 容 忽视 























P= 


天 


SS = Ea SE 
为 其 结果 直接 与 主题 相关 联 ， 所 以 抄 现实 的 方法 可 以 让 视觉 显得 更 整体 ， 主题 更 突出 。 它 将 抽 像 的 主 
题 通 过 实体 表达 出 来 ， 并 以 之 做 为 内 容 信息 的 载体 ， 从 而 在 第 一 视觉 上 直观 地 体现 了 核心 内 容 并 突出 


小 





HH 
加 





() () 2 
束 是 抄 认 现实 中 的 物体 
() () ee 
多 抄 现实 的 三 步骤 : 减法 、 分 块 、 加 法 
抄 现实 让 网 页 主题 一 目 了 然 、 不 言 而 喻 
(7) S Ee. 
《 剑 灵 》 武 神 塔 介绍 专题 、QQ 西游 安全 中 心 


形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





咒 是 抄 效 现 买 中 的 物体 


简单 晶 义 上 识 融 是 眼前 所 能 见 到 的 一 切 事 物 ， 正 如 你 现在 手中 的 书本 、 手 
水 杯 。 0 ee 





这 里 所 指 的 现实 是 任何 可 以 被 我 们 认 知 的 可 视 的 物体 
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一 冰棒 球 的 网 页 变形 记 





抄 现实 的 三 步 又 : 减法 、 分 块 、 加 法 


让 我 们 暂且 抛 开 主题 , 束 一 个 物体 可 以 如 何 变 成 网 页 而 言 , 它 有 两 个 关键 点 : 
第 一 是 现实 事物 转换 成 网 页 载体 过 程 中 的 形态 取舍 ， 如 何 让 观 者 既 能 辨识 出 抄 


py 不 目 允 的 物体 ， 又 能 够 给 未 来 信息 留 下 足够 的 目 由 排版 空间 ; 第 二 是 信息 内 容 与 形 
态 载体 的 结合 和 排版 ， 如 何 让 信息 内 容 完 整 的 、 有 条 理 的 排 布 到 形态 载体 中 。 











选择 物 ， 是 对 主题 视觉 表现 的 选择 。 主 题 有 抽 像 和 有 具 像 之 分 。 具 像 的 主题 一 般 比 较 好 把 握 ， 如 棒球 比赛 ， 我 们 很 目 
然 地 选择 棒球 或 球场 做 为 主 视 竞 。 如 果 一 些 辣 接 或 者 抽 像 的 主题 ( 比如 安全 选择 盾牌 、 压 力 测 试 选择 压力 表 等 ) ， 则 需 
要 我 们 友 挥 一 定 的 想象 。 


下 面 我 们 来 一 起 看 看 这 一 颗 棒 球 的 网 页 变形 记 。 








在 还 未 翻 到 下 一 页 前 ， 你 可 以 想像 一 下 ， 假 如 这 个 棒球 是 一 个 网 页 ， 它 会 是 什么 样 的 ? 你 会 保留 它 的 哪些 特征 让 它 
看 起 来 依然 是 一 个 棒球 而 非 篮球 ?你 会 如 何 让 它 的 形态 和 内 容 结 合 ? 你 会 如 何 利用 它 的 形态 关系 使 你 的 内 容 更 有 层次 ? 





给 目 己 一 分 钟 时 间 ， 不 许 翻 页 剧 透 。 


ol 





形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 


减法 STEP1 


二 a 为 了 不 使 形态 干扰 到 网 页 内 容 的 表现 ， 通 常情 况 下 ， 我 们 会 先 
eS 对 物 的 形态 进行 简化 ， 使 其 在 保留 竺 征 的 同时 更 适合 之 后 的 内 容 安 
置 。 简 化 步骤 有 两 个 : 
特征 的 提 练 。 如 案例 中 的 棒球 ， 它 的 特征 有 两 个 ; 一 个 是 
图 形 的 办 认 代 表 是 一 个 球体 ; 另 一 个 是 红色 的 允 纺 代表 
一 个 棒球 而 非 足球 或 篮球 。 


审 坦 删除 重复 的 摘 述 。 特 征 提炼 后 ， 在 保留 棒球 特征 的 情 
况 下 ， 我们 选择 去 掉 其 中 一 根 颖 线 ， 为 信息 腾 出 更 多 可 操 
作 的 空间 。 


分 块 STEP2 
PLAY UP! 、 


和 分 块 便于 根据 物 的 形态 对 网 页 的 信息 内 容 进行 规划 。 主 要 有 三 
AN 个 关键 点 - 
对 信息 进行 消化 ; 充分 理解 信息 对 之 后 的 排版 和 信息 调整 
有 很 大 的 帮助 。 也 可 以 和 需求 方 进行 沟通 ， 对 信息 进行 微 
i 调 或 收纳 。 


在 吃透 信息 后 ， 我 们 殊 可 以 开始 正式 的 分 块 ， 分 块 是 一 
逐 层 深入 、 由 粗 到 细 的 过 程 。 


分 块 完成 后 ， 我 们 结 型 进行 一 定 的 信息 和 造型 
微调 。 


了 加 法 STEP3 
PLAY 二 


0 进行 加 法 前 ， 网 页 的 大 致 色 形 已 经 出 来 了 ， 之 后 加 法 的 工作 主 





“Ai CE A 
Se 
i wr es 具体 内 容 的 填充 。 
二 区 时 氛 和 视觉 的 补充 。 可 以 让 整体 效果 更 真实 ， 如 前 景 的 人 
QPrururss 员 流 加 和 过 让 是 硬 朋 光 运动 感 更 强 。 
ED GD 





特征 的 还 原 和 细节 补充 。 不 和 估 于 委 饰 ， 人 在 确 
保 信 息 的 完整 性 后 ， 我 们 在 不 干扰 信息 呈现 的 情况 下 还 原 
一 些 原来 删 去 的 细节 “， 如 背景 乡 We 选择 了 低 透 明 
低 饱 合 的 浅 灰 色 ， 让 棒球 更 真实 。 
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当 我 们 浏览 这 个 页 面 时 ， A 经 过 简单 的 视觉 扫 摘 我 们 便 立 刻 了 解 了 这 个 专题 的 
核心 主题 。 结 构 清晰 、 主 题 明 确 、 视 兑 强烈 ， 这 就 是 ' 抄 现实 ' 带 来 的 直接 而 有 效 的 视觉 效果 


人 小结 


抄 现 实 的 过 程 是 利用 现实 物件 为 原型 来 痕 载 网 页 的 信息 内 容 。 抄 现实 残 像 旧 公 寓 改 造 ， 倍 大 我 们 将 ” 抄 现实 ba 
一 个 旧 公 高 改造 工程 ， 假 定 我 们 和 房子 原 主 人 有 着 不 同 的 生活 习惯 ,我们 殊 需 要 拆 增 ， 重新 划分 功能 区 ， 重 新 滚 修 涂饰 ， 
J 正如 我 们 " 抄 现实 "的 万 法 : 减 去 、 分 块 、 加 法 。 下 面 我 们 来 具体 看 看 它们 的 相通 之 处 。 


形式 感 + 网 页 视 党 设计 创意 拓展 与 快速 表现 





减法 

利 先 根据 生活 需要 ， 我 们 会 选择 一 个 形态 大 小 合适 的 房子 ， 这 个 房子 要 满足 居住 人 的 基本 功能 需求 ， 整 体 的 改造 也 
需要 在 可 操控 的 成 本 范围 内 。 选 定 房子 后 我 们 可 能 会 先 拆 去 原先 的 分 割 围墙 ， 万 便 我 们 设计 出 更 贴 合 现 有 需求 的 空间 。 
网 页 设计 也 是 一 样 ， 原 先 的 细节 经 单 是 束缚 想像 力 和 内 容 设置 的 柳 锁 。 当 然 我 们 也 不 能 无 限制 地 拆 墙 ， 保留 染 柱 和 承重 
省 是 必需 的 ， 这 也 便 是 我 们 " 抄 现实 "网 页 设计 万 法 中 提 到 的 特征 ,房子 必须 还 是 房子 ， 抄 将 的 事物 必须 能 饿 识别 ， 这 是 
删 减 的 底线 。 总 而 言 之 我 们 归纳 为 三 点 : 一 、 选 房 要 合适 ， 选 对 房 可 以 为 后 面 的 工作 节省 最 大 的 成 本 ; 二 、 拆 墙 越 干净 
操作 的 目 由 度 越 高 ,同时 也 要 考虑 重建 的 成 本 ; 三 、 拆 墙 不 能 吕梁 柱 ， 保 留 梁 柱 和 保留 物件 的 特征 一 样 重要 ,没有 了 它们 ， 
不 论 房子 还 是 现实 物件 都 将 不 复 仓 在 。 


分 块 


在 功能 划分 人 前， 我们 必须 再 梳理 一 志 目 己 的 生活 需求 ， 正 如 我 们 在 进行 网 页 分 区 前 所 要 做 的 信息 消化 。 比 如 我 们 而 
翌 一 个 更 大 的 洗浴 辣 ， 或 者 希望 将 客厅 娱乐 与 卧室 一 体 化 ， 这 时 候 我 们 可 以 在 房子 的 基本 大 轮廓 内 ， 结 合 管道 的 基本 设 
置 进行 空间 的 重新 划分 。 分 块 的 这 个 步骤 主要 是 解决 功能 性 问题 。 满 足 功能 需要 才 使 一 切 行为 变 得 有 意义 。 网 页 设计 中 
的 这 些 信息 内 容 束 如 同 吃喝 拉 撤 睡 ,这些 吓 最 重要 的 。 


加 法 

与 分 块 解 决 的 功能 性 问题 相 比 较 ， 加 法 解决 的 则 是 填充 和 浅 饰 的 问题 。 在 做 完 分 区 并 完善 好 了 基础 六 修之 后 ， 我 们 
束 可 以 陆续 将 我 们 的 生活 用 品 搬 进 房子 ， 配置 家 电 、 沙 友 什么 的 ， 正 如 网 页 设计 中 的 内 容 填 序 。 如 果 时 间 和 金钱 充裕 我 
们 可 以 购买 得 合 目 己 个 性 的 沪 饰 物 、 调 整 灯光 气氛 等 ， 让 我 们 的 生活 环境 看 起 来 更 有 情趣 ， 也 正如 使 我 们 的 网 页 看 起 来 
更 生动 。 它 是 一 种 钊 上 添 化 ， 它 可 以 为 你 的 视觉 加 分 ， 但 切忌 过 于 繁复 而 影响 到 了 功能 的 使 用 ， 毕 竟 家 不 是 博物 馆 ， 网 
页 信息 传播 才 是 最 重要 的 。 








抄 现实 让 网 页 主题 一 目 了 然 、 不 言 而 喻 


下 面 我 们 通过 "减法 、 分 块 、 加 法 "这 三 个 步骤 来 欣赏 和 分 析 一 些 网 页 案例 。 
在 关注 大 的 万 法 的 同时 ， 也 可 以 学 习 它 们 的 创意 大 We 
我 们 还 可 以 天 注 近 似 主题 的 不 同 抄 和 袭 目标 ， 以 及 相同 抄 黎 目 标的 不 同 表 达 万 式 。 








一 个 主题 ， 我 们 可 以 有 多 种 的 联想 ， 并 呈现 出 不 同 的 设计 表现 。 
天 于 节日 的 联想 有 很 多 : 欢聚 、 美 食 、 红 包 、 蒜 炮 、 礼 化 、 祝 福 。 
制作 前 ， 我 们 的 设计 结果 有 着 多 种 可 能 性 。 





下 面 我 们 看 看 三 个 关于 记 日 的 案例 ， 它 们 选择 了 不 同 的 抄 效 对 像 ， 为 我 们 呈现 了 不 同 的 节日 视觉 。 


右 图 是 一 个 春节 活动 大 盘 
所 主题 页 面 ， 页 面 由 六 个 活动 本 SB 新 年 李 宝 奇兵 : 


组 成 ， 每 个 活动 只 呈现 其 活动 a < 多 SA 他 | 
名 称 和 时 间 ， 内 容 并 不 多 。 这 dh 


里 作者 引用 了 节日 团圆 的 联想 ， 
选择 了 团圆 桌 来 作为 抄袭 对 像 。 
每 个 活动 为 圆桌 上 的 一 个 成 员 
席位 。 红 黄色 的 桌子 和 蓝 色 的 
纹理 背景 ， 让 颜色 饱满 、 年 味 
儿 十 足 。 





Re 、 bE i 
( 1) 减法 : 减法 不 仅 仪 包 Ms / 


Ee 
和 


| 活动 时 间 : 
二 | gE 4 、 
括 细节 上 的 删 减 ， 也 包括 角度 二、 oe SS 
变换 和 视觉 替代 ， 这 些 都 依据 人 SN 
月 10B 


实际 网 页 的 信息 量 而 定 。 这 个 eae 
案例 改变 了 圆桌 的 日 常 视觉 角 、 
度 ， 以 俯视 的 角度 蔡 代 ， 信 视 DD 
角度 给 内 容 摆 放 留 下 足够 空间 ， ee 
并 能 以 最 均衡 的 方式 呈现 六 个 
席位 的 活动 信息 。 











(2 ) 分 块 : 圆 果 分 为 六 个 成 员 司 ， 每 个 司 位 代表 一 个 活动 。 主 SLOGAN 视 竞 安置 在 圆 梨 中 间 的 转盘 上 ， 其 他 按钮 
和 补充 说明 信息 置 于 圆 朱 之 外 的 区 域 。 








(3 ) 加 法 : 在 基础 内 容 填 充 完整 后 ， 在 时 上 加 入 了 筷子 ， 进 入 按钮 用 资 夸 来 妆 载 。 近 景 由 于 模糊 绿叶 的 加 入 ， 使 画 
面 有 了 前 后 的 景深 关系 ， 也 让 红 绿 色彩 的 搭配 更 加 饱满 。 
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这 是 一 个 韩国 甜 椒 亲 上 暇 活动 大 盘点 页 面 ， 
PMANG 在 万 日 里 将 公司 各 种 游戏 活动 齐 聚 一 望 
为 玩家 献上 了 市 日 大 餐 ， 与 上 个 案例 一 样 也 选择 
了 市 日 聚餐 的 概念 ， 但 由 于 信息 量 的 不 同 ， 这 个 
网 页 选择 了 盘子 做 为 活动 内 容 的 载体 ,近似 的 主 
题 近似 的 抄 将 对 象 却 呈 现 了 不 同 的 视 帝 结果 。 


(1 ) 减法 : 这 里 同样 采用 的 是 俯视 角度 ,在 
此 基础 上 作者 还 省 略 了 果子 的 表现 ， 这 种 省 略为 
后 面 大 量 的 荣 盘 创造 了 更 大 的 空间 ， 同 时 也 突出 
了 承载 活动 的 荣 盘 。 


( 2 ) 分 块 : 这 个 页 面 以 菜 盘 做 为 基础 分 块 单 
位 。 由 于 信息 量 较 多 ， 这 种 纵 回 规则 的 荣 盘 排列 
万 式 较 之 上 个 案例 的 圆 昌 万 式 有 了 更 大 的 可 延续 
性 ， 为 随时 可 能 增加 的 大 量 活动 做 好 准备 。 


(3 ) 加 法 : 配 上 筷子 、 盗 碟 、 小 伦 等 活跃 气氛 ， 
空 盘 、 实 物 菜品 盘 的 加 入 增强 了 真实 的 气氛 ， 缓 
解 了 过 于 拥挤 的 信息 量 ,也 让 有 亲 盘 排列 更 加 工整 。 


这 是 韩国 C9 的 圣诞 节 专 题 ， 同 样 是 节日 ， 
这 里 选择 了 祝福 的 联想 ， 利 用 信件 来 承载 和 传达 
活动 信息 。 主 视觉 是 一 个 红色 的 信封 套 ， 内容 则 
通过 拆 革 展开 的 信 统 来 承载 。 信 纸 的 延续 性 设计 
良好 ,信息 承载 量 大 。LOGO 位 置 摆 放 相当 精巧 ， 
加 形 的 LOGO 造型 正好 奉 代 了 西方 信件 的 封口 
油 泥 ， 西 了 式 的 祝福 气氛 得 到 了 点 睛 。 红 绿 的 色彩 
搭配 契合 主题 。 抄 现实 的 整体 表现 延续 性 好 并 且 
直观 。 
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一 个 DNF 的 黑 钼 推广 、 订 制 和 续费 

的 页 面 ， 黑 钻 是 针对 DNF 的 VIP 用 户 开设 的 

游戏 特权 图 标 , 在 这 里 ， 作 者 选择 了 黑 钻 的 

乡 仿 作 为 整体 的 网 页 视 沉 载体 ， 主 题 明确 而 
直观 。 


(1 ) 减法 : 在 选 定 黑 钻 为 专题 的 抄 效 物 

, 作者 开始 通过 减法 删 去 黑 钻 的 立体 切面 
保留 了 钻石 的 外 轮廓 和 黑色 。 把 " 黑 " 和 
“ 钼 "有 效 的 提炼 出 来 。 


(2 ) 分 块 : 根据 页 面 内 容 和 黑 钼 的 轮廓 
线 ， 作 者 通过 与 其 外 形 相 平行 吻合 的 笠 线 进 
行 分 区 ， 在 这 个 部 分 我 们 可 以 看 到 作者 对 右 
侧 表格 的 精巧 优化 。 


( 3 ) 加 法 : 空间 分 块 和 进行 内 容 的 填充 
完成 后 ,作者 加 入 了 左 侧 低 胸 手持 红酒 杯 的 
游戏 人 物 以 及 写实 的 黑 钻 ,将 黑 钻 的 尊贵 的 
身份 交待 完整 ， 放 部 的 人 物 图 形 的 小 提示 和 
右 下 方 的 宝箱 图 片 对 多 余 的 空间 进行 了 填充 
也 让 页 面 更 加 完整 和 深 动 。 


一 个 赛车 游戏 的 活动 专题 ， 这 个 专 
A t 同 组 成 ， 它 通过 参加 活动 获 
得 积分 ， 积 分 累计 由 少 到 多 ， 并 且 在 不 同 的 
积分 结 点 都 有 不 同 的 奖品 ,页 面 利用 赛车 游 
戏 的 赛 道 将 整体 活动 贯穿 一 体 ， 并 通过 赛 道 
表现 了 获得 奖品 的 先后 历程 。 很 好 地 将 虚拟 
的 里 程 碑 概念 通过 现实 赛 道 的 方式 表现 出 来 ， 
婚配 合 了 活动 内 容 又 结合 了 游戏 主题 的 表现 。 
微 透视 的 者 道 表现 也 将 画面 的 空间 感 和 赛车 
的 速度 感 表现 出 来 ， 让 银白 色 的 网 页 设计 简 
约 而 不 简单 ， 视 觉 存 在 感 强 ， 并 充满 看 点 。 
通过 这 个 案例 我 们 也 可 以 看 到 抄 现实 的 表现 
不 仅 是 现实 物体 的 简单 抄袭 ， 也 包含 了 对 现 
实物 体 的 形态 概念 的 提取 ， 赛 道 地 图 也 正 是 
这 种 概念 特征 提取 的 表现 。 
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一 个 足球 主题 页 
面 ， 选 择 的 对 像 近似 先 
前 案例 中 的 棒球 ， 但 由 
于 内 容 的 不 同 ， 信 息 排 
布 的 方式 类 似 于 之 前 的 
日 案例 ,抄袭 对 象 的 
选择 不 仅 需 要 考虑 到 主 
题 的 联想 ， 也 要 同时 关 
注 信 息 的 承载 与 后 期 的 
排版 ， 这 个 案例 就 很 好 
地 利用 了 足球 的 实体 造 
型 ， 完 美 地 安放 了 五 个 
活动 。 视 党 完 整 ， 主 题 
突出 。 


这 是 一 个 棒球 游 
戏 的 抽奖 主题 页 面 ， 它 
模拟 了 儿 时 在 盒子 里 抽 
奖 的 画面 ， 充 满 了 重 趣 
和 游戏 的 快乐 。 它 虽然 
也 是 一 个 棒球 的 游戏 
页 面 ， 但 主题 侧重 点 不 
同 ， 抄 现实 的 对 象 也 残 
不 同 。 这 里 突出 了 抽奖 
主题 的 活动 ， 棒 球 运 动 
则 通过 草地 及 背景 上 的 
棒球 和 球 棒 来 体现 。 
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之 前 的 案例 基本 只 有 一 个 核心 活 
动 ， 而 这 个 案例 则 是 由 两 个 相对 并 列 的 
活动 组 成 : 一 个 是 以 游戏 筹码 竖 为 主 视 
竞 的 部 分 ， 是 一 个 抽 牌 得 积分 霉 码 的 活 
动 ; 另 一 个 是 以 手持 写字 板 为 主 视觉 的 
是 一 个 签到 活动 ， 通 过 签到 获得 积分 和 
奖励 。 它 通过 两 个 关联 的 承载 体 将 两 个 
活动 串联 在 一 起 。 我 们 可 以 想象 它们 是 
在 同一 个 空间 里 的 故事 ， 玩 游戏 得 积分 ， 
然后 再 去 管理 员 那 里 签到 获得 积分 。 视 





痪 表现 的 情境 感 哩 ， 即 使 看 不 懂 文 意 也 
能 通过 视 沉 和 游戏 经 验 来 读 懂 大 致 的 活 
动 内 容 。 另 外 这 个 页 面 大 到 活动 主体 的 


游戏 扑克 ， 小 到 按钮 和 提示 都 用 到 抄 现 
实 的 表现 方式 。 内 容 设置 精巧 ， 主 题 突 
出 、 视 觉 整 体 性 良好 ， 





这 是 一 个 解除 密码 锁 的 活动 页 面 ， 
只 要 打开 仓库 的 大 门 ， 成 功 解除 密码 锁 
的 玩家 区 可 以 获得 奖品 。 这 个 页 面 的 抄 
现实 表现 主要 集中 在 仓库 大 门 和 解密 板 
上 ,大门 的 平面 为 信息 排版 提供 了 空间 ， 
钢铁 的 质感 对 应 科技 化 的 密码 锁 ， 看 起 
来 真实 并 充满 挑战 ，| 把 手 、 开 | 转盘、 
压力 表 等 元 素 的 加 入 让 大 门 的 表现 更 加 
生动 





13 





形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 


QAVA EE Ce 


R011. 04, 12 - OS, OR 
IMI1S35351CIINI : (> 尺 | 哮 到 刘 $H2H1 


0| 人 村 ; 故 划 5 了 型 全 习 三 时 世 到 训 奈 呈 伺 
10 会 3A| 47 第 71 X11 对 1 








Sf A ol 


雪上 三 中 人 | 二 中 7 层 儿 佬 侈 蛋 对 人 全 嘻 会 他 届 喇 半 人 | 戏 合 U7? 
呈 财 大同 吧 E 姑 双 于 三 坚 C4 器 部 对 8104 CH 妓 器 王公 血 对 017H4Q1 
二 of 刘 m 旨 二 半 于 DALG~ 300 合 娃 74100% 天 司 基 Ud. 


La 
YE 人 YY Mo! 9 在 人 | 地 





请 同人 | 抽 三 0104 8G (3} 
避 全 个 有 二 27 


司 及 对 3} 则 寺 硬 如 人 于) 
时 且 全 如 : 38 闪 





是 对 世 蝇 如 1 名 对 短 20 下) GA 
fag 时 呈 什 嫩 : 200 并 > 





— LU CT NB 





时 个 如 :5 
Qj 节 E00 i 竺 圣 对 OW0171 | hs 二 7| 型 出 | 从 = 本 
@ Wa idk | 当中 客 Uc- 


@ ou WE HUEQ? we tam sa saen sem sso umn 


BNESW'IZ a3=IDIDVC< 


一 个 抽奖 活动 ， 但 作者 将 它 依附 于 拆 弹 情境 。 题 材 与 上 个 主题 近似 ， 但 由 于 AVA | 


解密 选择 了 抄袭 拆 弹 现场 的 视 完 表现 ,。 雪 地 里 水 封 的 定时 炸弹 ,红色 的 面板 显示 着 剩余 的 时 间 ,右边 则 是 2 选 1 的 红 监 近 和 


所 击 其 中 一 个 炸弹 可 能 会 拆除 或 者 爆炸 ， 如 果 成 功 拆除 束 能 获得 奖品 。 作 者 在 这 里 很 写实 地 还 原 了 拆 弹 现场 ， ee 
也 将 其 置身 于 拆 弹 雪 地 的 现场 ， 并 和 雪 i 


进行 结合 ， 情 境 感 极 强 。 两 个 拆 弹 按钮 也 作 了 现场 还 原 的 雪 玉 处 理 ， 寒冷 的 气氛 
和 倒计时 的 表 让 人 感受 到 现场 拆 弹 选择 前 的 紧张 室 息 的 气氛 。 
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《 剑 灵 》 武 神 培 介 绍 专题 、QQ 西游 安全 中 心 


下 面 我 们 来 自己 动手 试 一 试 。 为 主题 选择 合适 的 " 抄 现实 "目标 ， 并 对 其 进 
行 特征 提炼 ， 把 握 内 容 排版 与 抄 净 目标 的 关系， 并 注意 细 世 搭配， 让 整体 更 加 
生动 。 


《人 惠 灵 》 武 神 塔 介绍 专题 


形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





一 、 需 求 分 析 


1. 主 题 


是 武神 残 上 100 层 “武神 培 " 是 剑 灵 游戏 测试 新 版 本 中 推出 的 一 个 特色 内 容 ， 它 是 一 个 比武 场 ， 由 搬 层 到 高 层 ， 难 
度 逐 层 增加 。 页 面 的 内 容 主要 分 为 三 部 分 : 视频 、 武 神 塔 副本 的 介绍 以 及 七 层 塔 中 的 BOSS 和 掉 落 的 宝贝 的 介绍 。 需 求 
万 希望 内 容 的 呈现 能 够 结合 武神 塔 的 造型 进行 表现 。 


2. 排 版 预想 


为 了 更 好 地 表现 主题 并 结合 塔 的 造型 ， 我 们 选择 使 用 抄 现实 的 万 法 ， 并 计划 利用 塔 的 造型 来 濠 下 这 些 信息 。 但 如 果 
将 塔 的 造型 与 内 容 相 结 合 我 们 将 面临 三 个 问题 : 一 、 保 留 哪些 塔 的 特征 ? 二 、 文 字 内 容 放 在 哪 ， 三 、 如 何 梳理 几 块 内 容 
的 层次 ? 


3. 现 有 素材 


大 概 理 清 思 , 我 们 来 看 看 现 有 的 素材 。 都 训 巧 妇 难 为 无 米 之 炊 ， 在 着 实 无 米 ， 那 残 得 目 己 种 ! 开 个 玩笑 ， 不 过 
ee NI 并 不 多 ， 许 多 时 候 咀 都 得 区 着 法 子 玩 。 


一 张 武 神 塔 的 外 景 ， 拿 到 素材 的 时 候 它 的 像素 并 不 高 ， 只 能 暂时 考虑 作为 背景 的 一 小 部 分 ， 如 果 要 将 内 容 帮 和 置 在 塔 
内 的 话 ， 这 个 素材 的 编辑 难度 比较 大 。 





武神 培 


另外 还 有 两 张 武神 培 的 内 景 截 图 ， 图 片 质量 不 错 ， 但 似乎 对 这 个 创意 起 不 了 大 大 的 帮助 ， 姑 且 先 留 
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下 面 是 每 层 塔 内 的 BOSS 截图 ， 这 套图 一 共有 七 张 ， 由 于 是 游戏 过 程 中 的 截图 ,所 以 人 物 仿 小， 质量 也 不 如 原画 和 
正式 输出 的 3D 模型 高 ， 而 这 些 个 BOSS 又 是 内 容 中 必需 呈现 给 玩家 的 ， 所 以 如 何 扬长 避 短 又 是 一 个 难题 。 





人 物 


剑 灵 现 有 的 游戏 素材 大 致 可 以 分 为 三 种 : 3D、2D、GIF 的 近 搞 Q 版 小 动画 。 
3D 素 材 是 一 个 很 写实 的 风格 ， 如 果 将 其 与 具体 的 塔 造型 结合 并 还 要 盛 放 信息 内 容 的 话 ， 那 需要 绘制 出 与 其 匹 
配 的 精度 ， 一 方面 操作 难度 比较 大 ， 另 一 方面 也 不 利于 信息 的 呈现 和 得 阅 ， 由 于 过 分 写实 ， 版 式 的 局 限 性 也 
此 以 到。 


2D 素 材 相对 于 3D 来 说 相对 更 概念 化 一 些 ， 但 是 要 绘制 出 与 其 匹配 精度 的 塔 也 是 有 一 定 困难 的 ， 而 且 对 于 一 个 小 
版 本 介绍 专题 来 说 ， 时 间 也 比较 有 限 。 


第 三 类 ， 是 剑 灵 的 一 个 有 爱 化 表现 素材 ， 是 一 些 周 边 的 GIF 表现 ， 绘 制 简洁 、 表 现 力 强 ， 也 比较 具有 情感 化 。 绘 
制 出 与 之 匹配 的 精度 的 塔 的 造型 也 相对 比较 容易 ， 确 实 算是 个 不 销 的 方 同 。 


4. 总 结 
通过 对 主题 、 内 容 、 素 材 的 了 解 ， 我 们 残 有 了 大 概 的 构思 。 
我 们 将 通过 一 个 简洁 的 塔 造型 去 承载 整个 信息 内 容 ,并 配合 以 Q 版 有 爱 的 小 动画 形 像 活跃 视 完 气氛 。 


每 层 塔 的 内 容 安 置 在 独立 的 单 层 塔 中 ， 并 通过 七 层 塔 的 组 合 构 成 一 个 高 备 入 云 的 塔 型 。 在 选 定 方 同 的 同时 也 市 来 一 
个 问题 ， 简 约 的 风格 和 必须 出 现 的 BOSS 截图 风格 如 何 匹 配 ? 精度 和 风格 之 间 的 差异 都 会 造成 视觉 的 不 统一 。 如 果 一 时 
找 不 到 答案 ， 我 们 暂时 把 这 个 问题 放 在 脑子 的 竺 处 理 区 。 人 策略 从 来 不 是 万 全 的 ， 人 在 大 万 回 确定 之 后 ， 许 多 细节 问题 是 在 
设计 中 一 步 步 求解 的 。 当 然 ， 这 个 万 法 并 不 是 最 好 的 ， 但 却 是 我 们 经 音 遇 到 的 情况 ， 天 时 地 利 、 情 投 意 合 的 情况 是 少 有 的 ， 
如 果 要 求 以 万 全 的 策略 才 开工 ， 那 时 间 和 环境 都 是 不 允许 的 ， 残 像 那 句 话 怎么 说 来 着 ,爱情 束 像 一 条 河 ，, 谁 不 是 摸 着 石 
头 过 河 呢 ” 所 以 在 大 万 向 确定 后 ， 我 们 融 开始 安 试 荔 手 了 。 


形式 感 + 网 页 视 党 设计 创意 拓展 与 快速 表现 





二 、 设 计 分 解 
减法 STEP- 


游戏 中 ,武神 塔 拥有 它 复杂 的 飞檐 造型 和 层次 丰富 的 质感 纹理 ， 
每 层 有 大 小 不 一 的 抠门。 为 了 能 给 信息 内 容 足 够 的 空间 ， 我 们 将 复 
杂 的 飞檐 造型 进行 归纳 ， 并 暂时 去 掉 了 拱门 ， 这 样 我 们 也 会 比较 明 
确信 息 内 容 的 位 置 。 


分 块 STEP2> 


接 下 来 我 们 残 需 要 开始 对 内 容 进行 分 块 ， 我 们 知道 内 容 大 致 分 
为 三 块 : 视频 、 副 本 介绍 、 七 层 塔 。 由 于 七 层 塔 的 数量 较 多 ， 为 了 
能 使 它 与 介绍 和 视频 内 容 有 了 区别 并 保持 七 层 的 统一 性 ， 我 们 将 它们 
进行 颜色 的 区 分 ， 并 在 位 置 上 依照 塔 的 物理 顺序 ， 由 下 而 上 从 一 层 
到 七 层 。 由 于 内 容 较 长 ,每 层 塔 可 以 做 成 收纳 的 形式 ,以 便 控制 长 度 。 





加 法 STEP3 


将 拱门 重新 安置 在 分 层 塔 的 左 侧 ， 用 来 安放 每 层 比武 塔 的 主 
BOSS， 要 突出 的 塔 项 加 入 主 视觉 调 证 气氛 ， 在 背景 加 入 其 他 建筑 造 
型 。 并 将 主 视觉 的 内 容 塔 置 于 一 个 高 管 入 云 的 角度 ， 体 现 了 "是 武神 
殊 上 100 层 " 的 概念 高 度 。 
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六 





ES 


回头 说 说 先前 留 下 的 那个 风格 匹配 的 顾虑 。 如 何 降 低 写 实 的 游戏 截图 与 相对 简约 风格 的 网 页 的 冲突 感 。 浏 览 截图 我 














们 友 现 ， 素 材 都 是 塔 内 的 场景 ， 并 且 基 本 上 是 平视 的 角度 ， 于 是 便 在 贺 面 上 开 了 一 道 立 体 的 门 ， 将 场景 安置 在 | 后 
伊 的 视角 可 以 增强 画面 的 统一 感 。 门 的 微 写实 表现 对 截图 和 塔 的 两 种 风格 进行 了 中 则 过 渡 ， 减弱 了 二 者 站 突 感 。 








-4 进入 官网 。 员 值 中心。 官方 向 博 





本 克也 界 可 本 朋 讯 基 池 ， 请 马上 避 录 绑 的 游 旭 信 宇 | 辐 讯 尖 汉 


A 进入 窒 网 。 灵 伟 中 7 
> 








二 业 枪 洛 人 在 丰 难 访 嫉 1 守信 
以 及 习 得 神功 的 病 司 。 位 共 硬 责 
希 里 你 克 职 息 号 信 信 的 嘱 沁 本 才 的 
01 进入 条 件 
腕 所 有 主线 任务 
进入 起 神 增 
03 直上 5 楼 
忒 凋 云 潭 元 的 任务 后 可 以 焉 大 厅 二 后 付 5 所 中 商 有 而 时 ,六 
本 欧 省 备用 下 路 宅 





/ 
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疾 欢 ip 来 到 腾讯 游戏 ， 





马上 登录 次 的 游戏 人 生 腾讯 游戏 


进入 官网 。” 灵 值 中 心 ”官方 微 博 





02 规则 








03 直上 5 楼 


技巧 、 心 态 、 信 心 、 袁 力 、 运 气 











上 登录 闪 的 游戏 人 生 “腾讯 游戏 


关 玛 时 戏 生 二 沁 巡 六 戏 司 长 


二 32E 起 欢 j 来 到 腾讯 游 


进入 官网 ” 灵 值 中 心 。” 官方 微 博 上 海 二 区 员 呆 味 《 要 录 名 


02 规则 


师 的 召唤 后 即 可 击 的 8O 





杀 光 他 们 





青 马 上 登录 您 的 游戏 人 生 腾讯 游戏 





关 豆 济 戏 和 后 记 巡 而 戏 后 式 


A 周游 几 入 1008 i 


进入 官网 。” 灵 值 中 心 。 官方 微 博 上 海 二 区 咯 呆 味 《 要 景色 











提供 修理 , 木 桩 ， 
仓库 , 竞 换 商人 

日 常任 务 公告 等 等 
基础 服务 设施 
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有 E39 QQ 西游 安全 中 心 


一 、 需 求 分 析 
1. 主 题 


天 于 安全 这 个 看 似 虚 拟 的 形容 词 ， 我 们 可 以 做 怎样 的 联想 ? 这 里 我 们 选择 了 盾牌 ， 它 有 防御 的 涵义 ， 也 有 一 定 的 


间 可 能 性 给 我 们 安置 内 容 。 


2. 排 版 预想 


在 我 们 大 致 浏览 了 这 个 需求 后 ， 会 友 现 它 的 核心 是 四 个 最 重要 的 安全 "“ 铁 防 ”， 然 后 是 它 的 SLOGAN 及 概述 ， 以 及 四 
个 招展 功能 按钮 ， 所 以 可 以 大 致 设想 我 们 需要 一 个 大 的 区 域 和 三 个 小 的 辅助 区 域 。 


内 





21 





形式 感 + 


网 页 视觉 设计 创意 折 展 与 快速 表现 


二 、 设 计 分 解 


QV 
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LOGEN | 


ee 


Q 西 汕 妆 全 电 心 3 


= 





本 





减法 STEP 


概括 盾牌 的 外 形 。 我 们 将 盾牌 的 纹理 和 细节 的 造型 删 去 ， 保 留 


尼 的 金属 质感 和 盾牌 外 轮廓 ， 将 中 心 部 分 做 为 内 容 的 主要 承载 区 域 。 


分 块 STEP2 


根据 交互 稿 进行 内 容 区 域 划 分 。 根 据 四 大 活动 和 三 部 分 辅助 
信息 ， Ce 分 为 四 块 。 通 过 丝 市 进行 区 域 分 割 以 满足 信息 承 
载 的 需要 ， 并 微调 了 盾牌 的 结构 ， 安 置 四 个 拓展 按钮 。 盾 牌 的 整体 
te 


加 法 STEP3 


填 却 内 容 并 进行 修饰 。 在 大 体 的 框架 搭建 好 后 ， 我 们 加 入 人 物 ， 
细 化 背景 ， 并 进行 具体 内 容 的 排版 和 和 填充， 丰润 细节 。 


2 en 


站 卫 


3 登录 铁 防 

改 久 游戏 时 沁 要 输入 一 姐 只 他 日 己 A 者 于 直 三 SS2 作 进行 双 正 。 基本 

的 举 标 密码 , 更 安全 ， 才 站 也 无 法 使 用 、 匆 检视 
保险 邓 电 全 | 





这 是 一 个 早期 的 抄 现实 网 页 ,虽然 有 许多 设计 上 的 不 足 ,但 过 程 中 的 基本 思路 和 步 又 分 解 希望 能 够 对 您 有 一 点 帮助 。 


消 反 妃 日 vw\ TH 
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圆 、 万 、 三 角 


七 巧 板 ， 或 许 我 们 小 时 候 都 玩 过 ， 我 们 曾 利用 它 简 单 地 拼 出 想象 中 的 各 种 动物 花 乌 的 形态 ， 有 时 我 
们 也 会 有 意外 的 造型 收获 。 正 如 这 七 巧 板 ， 圆 形 和 万 形 与 三 角形 则 是 网 页 造型 结构 中 的 精髓 元 素 的 归纳 ， 
即使 再 丰富 生动 的 物体 也 可 以 由 它们 组 成 。 现 在 我 们 利用 它 进 行 网 页 框架 的 打造 ， 不 知道 会 不 会 有 意外 的 
el 








O20 
三 种 基础 形态 组 合 的 视觉 盛宴 
2 ea 

() S 七 巧 板 组 合 和 天 马 行 空 联想 练习 
O31 

设计 是 一 个 理性 + 运气 + 联想 的 过 程 
(). ) 4 做 做 

QQ 西游 恩人 节 专 题 
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、> 三 种 基础 形态 组 合 的 视觉 盛宴 
圆 、 方 、 三 角 是 利用 自然 界 最 基础 的 三 种 形态 进行 形态 构思 的 一 种 方法 ， 类 
4 似 于 国画 里 的 山水 泼墨 法 。 圆 、 方 、 三 角 利 用 三 种 形态 的 内 在 情感 的 相互 配合 表 
达 不 同 的 视 帝 感受 ， 在 随 性 和 游戏 中 寻找 到 富有 创造 力 的 视 完 效果 ， 并 通过 理性 
部 的 修正 和 细 化 ， 最 终 找 寻 到 符合 主题 的 造型 。 


做 为 目 然 界 视觉 的 三 种 基础 形态 ， 它 们 分 别 由 直线 、 折 线 、 弧 线 组 成 。 


1. 圆 


它 由 弧 线 组 成 ， 外 形 苑 滑 圆 润 饱 满 , 这 样 的 形态 通常 让 我 们 浮现 一 些 可 
爱 、 灵 动 的 、 有 亲和力 的 画面 想象 ， 它 通常 在 一 些 Q 版 的 、 欢 乐 的 主题 中 
较 单 出 现 。 








2. 方 


这 是 一 个 最 整洁 的 形态 ， 它 由 直线 构成 ， 在 门 尸 网 页 和 报纸 的 排版 中 
最 常 出 现 ， 因 为 在 阅读 浏览 上 万 形 可 以 尽量 排除 形态 上 的 干扰 ， 横 平 坚 直 以 
最 整洁 的 万 式 梳理 信息 ,所 以 万 形 经 常 出 现在 信息 量 较 大 的 页 面 中 ， 或 者 计 
重 、 严 肃 、 情 感 内 伍 的 主题 中 。 但 方形 这 种 横 平 坚 直 的 、 一 丝 不 有 的 "整齐 
有 时 也 显得 采 板 、 生 硬 。 





3. 三 角 


它 是 由 折线 尖 角 构成 的 ， 形 态 上 有 和 急转直下 的 意思 ， 尖 铝 的 造形 给 人 以 
强烈 的 情感 刺激 和 反差 ， 倾 任 的 角 硫 也 会 市 给 人 以 速度 感 。 所 以 三 角 的 形态 
给 我 们 市 来 的 感受 通常 是 刺激 的 、 运 动 的 、 时 尚 的 、 尖 锐 的 。 这 样 的 形态 时 
常会 出 现在 一 些 时 尚 运动 品 牌 或 体现 速度 感 、 暴 力 、 刺 激 等 主题 中 。 





26 


(2 





纵 观 我 们 的 日 常 页 面 ， 万 形 因 为 其 整洁 、 易 识别 、 重 构 性 好 的 特点 在 网 页 设计 中 应 用 比较 广泛 ， 但 与 此 同时 也 容易 
让 人 审美 疫 务 ， 形 成 画面 生硬 的 印象 ， 所 以 在 非 门 户 或 大 型 资料 丫 等 页 面 上 可 以 采用 圆 、 三 角 这 两 个 元 素 进行 调和 ， 如 
内 容 不 多 的 小 型 资料 页 ， 用 以 增强 视 竞 上 的 灵动 和 刺激 ， 让 页 面 快 速 抓 住 玩家 的 眼睛 ， 达 到 专题 快速 传播 的 效果 。 


入 插 说 米 ， 加、 万 、 三 角 的 优点 区 ® 是 在 形状 的 理性 情感 牵引 下 ， 利 用 拼图 和 类 泼墨 的 万 式 打 破 习 惯性 思路 ， 创 造 在 
目 己 预 想 乙 外 的 新 奇效 果 。 因 为 没有 了 细节 的 牵 拌 ， 所 以 我 们 对 整体 形态 、 色 彩 以 及 内 容 的 排版 更 加 游 妨 有 余 。 圆 、 方 、 
三 角 的 组 合 过 程 是 一 个 将 理性 、 运 气 、 联 想 集合 一 体 的 设计 方法 。 


圆 、 方 、 三 角 设 计 方 法 的 优点 
1. 打 破 习 惯性 思路 


由 于 长 期 的 经 验 积累 ， 我 们 通 单 会 选择 一 条 合理 的 、 便 捷 的 道路 通 往 目 的 地 ， 但 这 条 路 往往 已 被 干 万 人 踩 路 ， 缺 少 
令 人 惊喜 的 风景 ， 加 、 万 、 三 角 的 思维 万 式 正如 中 国 的 山水 泌 黑 法， 为 我 们 枯 竟 的 思维 打开 了 创造 性 的 大 门 。 这 是 一 个 
冒险 的 过 程 ， 但 没有 冒险 也 丈 没 有 未 曾 被 人 友 现 过 的 美丽 风景 。 


2. 理 性 把 握 主 线 情感 


选择 主 形 态 残 是 掌控 整体 气氛 和 情感 的 主线 ， 在 理性 的 选择 中 泌 墨 ， 即 可 以 不 受 思 维 限制 ， ny 
主题 。 另外 ,因为 基础 元 素 的 简单 ,我 们 还 可 以 在 整体 色彩 的 搭配 上 有 较 强 的 擎 控 力 。 由 于 在 妾 试 过 程 中 没有 县 像 的 形 
所 以 受到 的 形状 和 色彩 的 拘束 较 少 ， 而 基础 形状 和 颜色 的 情感 瓯 可 以 更 加 充分 地 友 挥 。 


3. 变 幻 灵 活 
尼 不 受 实物 的 理性 限制 ， 无 细节 负担 ， 它 可 以 在 多 种 可 能 性 中 跳 来 跳 去 ， 我 们 可 以 毫 不 怜惜 地 随时 撤销 原来 不 合适 
的 想法 并 奔 向 另外 一 个 更 有 意思 的 创意 。 信 息 排版 方面 ， 可 以 快速 调整 版 块 和 文字 比例 ， 在 一 种 非 完全 有 具 像 的 实物 中 我 
们 可 以 较 灵 活 地 调整 它 变换 部 分 的 空间 比例 大 小 来 适应 内 容 的 摆 放 。 
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七 巧 慨 组 合 和 天 马 行 空 联想 练习 


现在 我 们 残 来 用 这 三 种 几何 形态 为 页 面 视觉 做 一 个 简单 的 配餐 吧 ! 在 此 只 是 
做 一 些 简 单 的 兰 试 ， 三 种 形态 的 组 合 还 有 许多 。 在 日 单 的 页 面 设计 中 我 们 可 以 根 


Bb 不 据 内 容 进行 页 面 基础 框架 的 打 稿 。 在 配搭 时 ， 必 须 注 意 选 择 其 中 一 种 形 做 为 主 形 ， 
tt 避免 形成 大 形 不 清晰 ， 小 形 各 自 独 立 的 碎 块 。 一 起 来 尝试 做 些小 练习 吧 ，。 











设计 是 一 个 
理性 + 运气 + 联 


的 过 程 。 





起 


一 、 七 巧 板 练习 


我 们 简单 地 使 用 这 三 种 形态 进行 合并 、 交 集 、 排 除 的 
拼合 ， 可 以 放大 缩小 任 一 形状 。 在 这 个 过 程 中 有 两 点 需要 
注意 : 

注意 主 形 ， 为 了 保证 整体 造形 的 美感 ， 我 们 需 
要 选择 其 中 一 种 形 做 为 主 形 ， 人 避免 形 成 大 形 不 
清晰 、 小 形 各 自 独 立 的 情况 。 


















注意 形 的 情感 和 空间 想像 。 根 据 主 形 的 不 同 ， 
画面 会 产生 不 同 的 情感 ， 把 握 情 感 可 以 增强 我 
们 对 空间 的 想像 。 在 练习 过 程 中 我 们 可 以 感受 
到 未 来 页 面 丰富 的 形态 变化 。 


我 们 在 此 只 是 做 了 一 些 简 单 的 尝试 ， 圆 万 三 角 的 组 合 
还 有 许多 。 在 日 常 的 页 面 设计 中 我 们 可 以 根据 内 容 进行 页 
面 基 础 框架 的 打 稿 。 





02 贺 、 方 、 三 角 





| | 人 = 
二 、 天 马 行 空 环 万 
在 这 个 环节 中 我 们 可 以 对 任意 打出 的 草稿 进行 形态 想像 。 它 有 一 定 的 目的 性 ,我 们 可 以 结合 主题 来 变换 各 种 几何 搭配 ， 
不 断 刺激 寻找 到 创作 的 G 点 ， 将 草图 中 的 概念 结构 形态 转换 成 具体 的 事物 。 


我 们 拿 上 一 页 的 最 大 图 形 举例 ， 国 亡 是 一 个 以 方形 为 主 三 角 为 辅 、 小 圆 为 最 次 的 形态 。 这 样 的 形态 是 丰富 而 饱满 的 ， 
含有 三 种 元 素 ， 并 且 有 主 有 次 。 人 在 我 们 打 好 满意 的 框 殿 霹 型 后 残 可 以 开始 实物 化 的 设想 与 制作 了 。 


已 可 以 是 一 个 信封 、 可 以 是 测量 器 、 也 可 以 是 棒球 场 。 而 它们 都 源 于 同一 种 基础 的 形态 。 


1 .信封 


在 原形 的 基础 上 补充 了 三 角 ， 残 形成 了 一 张 信 封 ， 加 入 层次 和 阴影 ， 让 
言 息 造型 更 加 生动 ， 如果 做 为 邮件 或 祝 昼 等 主题 联想 ,这样 一 个 框架 束 能 够 
派 上 用 场 了 。 


2. 测 量 蕴 


在 原形 的 基础 上 补充 了 一 个 圆 形 ， 加 入 刻度 和 指针 ， 它 束 购 成 了 一 个 测 
量 器 ， 可 以 是 体重 测量 器 或 者 压力 表 等 等 ， 比 如 一 个 压力 测试 的 活动 专题 或 
许 这 个 形态 便 可 用 上 。 我 们 都 可 以 在 一 个 基础 形态 上 根据 主题 来 选择 它 后 续 
的 变换 万 同 。 





测量 器 


3. 棒 球场 


保持 大 形 不 变 ， 我 们 在 细节 处 加 入 了 45 度 旋转 的 小 方形 ， 它 就 变换 成 
了 一 个 棒球 场 。 下 面 我们 来 看 看 这 个 棒球 场 的 具体 页 面 表现 。 





棒球 场 
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三 、 细 化 丰 肉 


DD FPS:TPS | 人 -NolY | RPG 0PEOIE. 志 4 | 2 人 YAY EY ee zwop a 合 z 于 








蔷 ? 确 准 全 和 91 YT 全 (PC > 从 到 呈 > Wut 4 ph oe > 
evrcY HT YY 下 全 利他 三 Bt Bl 0 出 匡 对 7 


乓 大 日 射 对 0j 全 入 当 会 于 7 玫 RC 对 世 72| 对 他 
be 
NEOWIZ GAMES, AN righes roserved Cepyright WISECAT isc OO 让 对 3 I dd re 





在 确定 了 要 转换 的 对 和 象 并 排 布 出 相对 合适 的 内 容 位 置 后 ， 我 们 便 可 以 安心 地 开始 细 化 它 的 质感 、 颜 色 、 层 次 ， 并 加 
上 一 些 细节 元 素 使 整体 表现 更 丰富 饱满 。 细 化 的 过 程 主要 有 三 个 内 容 : 

1. 颜 色 

圆 方 三 角 的 组 合 是 由 粗 到 细 、 由 概念 到 有 具 像 的 过 程 ， 所 以 它 可 以 比较 自由 地 把 握 色 彩 搭配 关系 。 我 们 可 以 在 建立 圆 、 
方 、 三 角 初 期 模 形 的 时 候 惑 党 试 定 义 其 色调 ， 以 免 后 期 细 化 后 再 进行 繁琐 的 调整 。 

2. 内 容 布 局 

在 信息 排版 的 时 候 ,因为 其 不 规则 的 形状 ,有 时 需要 适当 调整 字符 和 图 片 内 容 ,并 把 握 中 密 和 节奏 。 这 个 步骤 接近 子 抄 
现实 "的 分 块 环节 。 

3. 形 态 细 化 


颜色 和 内 容 布 局 襄 定 后 ， 我 们 丈 可 以 对 形态 进行 细 化 ， 加 入 素材 和 细 书 ， 并 添置 与 之 对 应 的 沪 饰 。 一 个 页 面 便 可 以 
大 体 完 成 了 。 

从 以 上 特性 来 看 , 圆 、 方 、 三 角 的 做 法 似乎 比较 置 险 ， 不 如 抄 现 实 来 得 稳妥 , 抄 现 实 是 一 种 基于 日 党 逻辑 的 天 联 应 用 ， 
而 副 、 万 、 三 角 则 是 一 种 不 断 上 自我 苹 代 刺激 大 脑 的 想像 过 程 。 它 不 断 刺激 我 们 在 预期 之 外 的 联想 兴奋 点 ， 激 友 出 许多 意 
想不到 的 人 创意， 这 些 创意 的 角度 、 组 合 、 色 彩 可 能 经 党 起 出 目 己 的 日 常 逻 辑 。 
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设计 是 一 个 理性 + + 的 过 程 


一 公交 的 形 * 态 正如 一 个 性 格 饱满 的 人 ， 都 是 由 多 种 不 同 的 基础 元 素 和 基础 情 
感 构成 。 三 个 形态 在 通常 的 情况 下 是 并 列 存在 的 ， 但 在 不 同 的 主题 中 却 各 有 主 次 ， 
i , 大 多 都 会 有 一 个 主要 性 格 在 主导 的 情绪 的 方向 。 选 择 主 形 ， 配 
以 辅 形 ， 这 样 设计 便 县 有 了 明确 的 个 性 和 丰富 的 情感 基础 。 








ett 整体 形态 的 的 0 有 灵动 。 
olHt | 
叫 衬 也 LI 司 ,TPC 误 入 四 | 时 钟 分 块 构成 的 三 角 ， 游戏 的 刺激 感 。 育 
景 隐藏 的 万 块 ， 方面 表示 了 这 是 一 个 俄罗斯 
方块 游戏 ， 另 一 万 面 又 使 圆 万 三 角 的 造型 更 加 
饱满 。 主 形 明 晰 ， 形 态 层次 丰满 。 





外 Ezl 和 人 He7Pp| | 





OHansame 


TETRIS dXlB Ele!0ldlE! 


| TIE | 
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EE 恬 王 ED 
和 rt 和 全 el | 01 人 后 LIAIO} | 刊 怪 娃 下 0IE{ ， 刊 怪 尼 登 登 | 刊 娃娃 吉 0| 芷 | 皇权 LIE| | 兰 引 全 呈 时 至 吕 则 如 关 | 号 8 起 日 ， 子 避 油 刘 | 硅 29l 


号 亿 了 | 习 } 今 9| 站 出 础 了 BEH. 
六 9 对 则 怪人 是 010 权 屋 HA| 人 A 亏 则 LIch 


COMING SOON 





1994 1997 V2005 2008 2010 


ol 和 三 HAIoF 至 7 但 人 of 和 三 HAIoF ol 入 三 UA|oF ol 入 三 HAIoF 
入 皇 | 和 全 2|R 生计 2| 2 22lol 
了 
<， 
[ear Mer | ED 
广告 6 路。 jeaer Gulo| eel ea 且 -天公 | 三 al 归 导 冯 | 出 如 时 | pt | 子玉 | 于 2 






和 和、 二 1ot 使 甜 
- oj] 人 = 人 I L 
对 包 了 引信 3| 并 世 础 了 HE. 
”地 9f8 0| 难 可是 910 本 SA| 人 | 寺 由 LIch 


COMING SOON 


ASTONISHIA HISTORY 


1994 1997 2005 2008 2010 


ol 和 三 UAIoF 至 7 伍 AP oi 和 三 HAIoF ol 和 三 UAIOF ol 和 三 UAIOF 
全 皇 对 和 2|R 和 后 2| 2 人 zlel 
> 
和 二 


初 看 这 个 页 面 似乎 很 难 找到 它 的 主 形 ， 但 通过 辅助 线 我 们 可 以 看 到 它 的 三 角形 态 与 游戏 
LOGO 的 边 三 角 相互 呼应 。 在 主 形 与 LOGO 的 交接 部 分 搭配 了 引线 ， 这 种 形态 配合 了 游戏 本 身 介 
与 Q 版 与 写实 乙 间 的 游戏 角色 风格 特点 。 两 边 的 直线 使 整体 的 形态 结构 进一步 饱满 化 。 整 个 页 面 
虽然 各 目 为 块 ， 却 澶 然 一 体 ， 刚 柔 并 济 。 
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访 netmarble olsE Oanaeyappl ey 





a 三 角 做 为 这 个 页 面 的 主 形 ， 配 以 人 物 
| 玫 丘 全 sah 形成 强烈 的 透视 ， 给 人 以 强大 的 视觉 冲击 

re 力 ; 第 二 层 形 是 圆 形 ， 它 隐藏 在 棕色 地 面 
的 弧 形 轮廓 中 并 与 远 处 的 蓝 色 地 球 呼应 ; 
第 三 层 形 是 方形 ， 它 体现 在 游戏 地 图 的 方 
格 中 和 地 面 的 方 格 纹理 中 。 主 形 冲 击 力 强 ， 
贺 方 三 角 配合 巧妙 、 形 态 饱满 











访 netmarble oaE 


EE oz0lMs Baca 


£1 到 全 Yel: 


2012.05.23-06.22 





BSGametree A os me < WE e— i 


一 个 基本 由 纯粹 圆 形 构成 的 页 
RS 面 ， 画 面 柔和 、 可 爱 、 灵 动 。 文 字 排版 的 
BB 隐 性 方块 稍稍 弥补 了 圆 形 造形 的 单一 。 整 
A i \ 体 页 面相 对 丰满 、 有 趣 。 
去 f AAA Aavice 


Navigation 
型 3| 划 9| 难 7 旭 
ET ET 





BGometree 区 rms zert CH 2。 ， Bt | WET 


> 坟 
HWE7| PROJECT. 1 ya (a 


= ny 


ET Ed 
型 9 名 9| 对 7 忆 
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QQ 西游 轧 人 太 专 题 


圆 、 万 、 三 角 的 思路 是 一 个 从 无 到 有 的 宕 试 过 程 ， 人 在 虚无 的 兰 试 过 程 中 ， 我 
们 唯一 可 以 把 握 的 是 它 的 形态 情感 ， 让 这 种 形态 情感 这 3 引 | 着 我 们 。 所 以 首先 主 形 
的 选择 很 重要 ， 其 次 是 三 种 形态 的 配合 ， 第 三 是 形态 的 主题 联想 与 造型 实现 。 当 
然 在 这 个 过 程 中 我 们 必须 兼顾 信息 的 体 量 和 形式 ， 这 样 能 做 到 二 者 的 元 美 结合 。 
下 面 我 们 来 尝试 一 下 。 

















医 攻 下 QQ 西游 恩人 节 专 题 
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一 、 需 求 分 析 


1. 主 题 


QQ 西洲 满 城 鱼 人 亲 翻 天 一 一 这 个 古 目 可 能 焉 是 我 们 收 到 的 来 目 项 目的 需求 ,内 容 大 致 分 为 两 个 并 列 的 活动 ,版 块 多 、 
义 字 也 不 少 。 要 做 一 张 有 形式 感 的 页 看 起 来 并 不 容易 。 怎 么 办 呢 ? 


让 我 们 来 简单 规划 一 下 吧 。 主 题 是 什么 ” 它 的 情感 和 气氛 是 什么 样 的 ? 这 是 一 个 愚人 万 主题 活动 ， 在 思 人 忆 这 一 天 ， 
人 们 可 以 公然 、 理 直 气 壮 的 通过 各 种 让 人 总 想不到 的 万 式 开 朋友 玩笑 、 无 厘 头 的 陷阱 、 爆 冷 ， 戏 弄 者 的 欢笑 与 被 戏弄 者 
的 惊 丰 构 成 了 我 们 对 轧 人 市 的 印 像 。 


2. 关 键 词 联想 


多 人 
= 来 中 
感人 二 


好 玩 有 是 





看 元 交互 需求 稿 后 ， 我 们 围绕 "恩人 蔬 " 这 个 主题 开始 了 系列 关键 词 的 联想 。 有 地 的 、 好 玩 的、 搞笑 的 、 刺 激 的 ， 这 
些 都 是 轧 人 市 市 给 我 们 的 感受 。 另 外 在 SLOGAN 中 ， 需 求 方 将 因 人 谐音 读 作 " 鱼 人 ” ,并 以 鱼 人 为 对 象 展开 整个 活动 内 容 
一 一 捕 鱼 和 逃跑 这 样 两 个 对 称 的 活动 类 型 。 
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3. 圆 、 方 、 三 角 的 主 形 选 择 
我 们 选择 ' 圆 、 方 、 三 角 ' 中 的 谁 做 为 主 形 态 呢 ? 


陷 并 、 尺 侈 、 欢 乐 ， 对 于 这 种 印象 的 质 素 ， 三 角 和 图形 成 为 了 基础 形态 中 的 两 个 相对 接近 的 选择 。 





刺 油 





好 玩 


根据 关键 词 联想 ， 我 们 选择 了 主 形 圆 形 和 辅 形 三 角 。 

圆 形 : 灵动、 活泼、 有趣、 可爱 、 多 变 。 

三 角 ; 尖锐 、 不 平衡 、 刺 激 、 动 感 。 

4. 排 版 预想 

内 容 有 多 少 ? 我 们 大 致 的 布局 构想 会 是 怎么 样 的 ， 
交互 稿 的 内 容 并 不 少 ， 所 以 我 们 需要 为 它 预 留 比较 大 的 信息 空间 。 


除了 SLOGAN 的 主 视 竞 之 外 ， 内 容 分 为 三 部 分 : 概要 、 核 心 活动 内 容 、 奖 励 。 其 中 最 主要 的 是 核心 活动 ， 它 分 为 并 
列 的 两 大 类 ， 每 类 分 别 由 四 个 小 活动 组 成 。 这 也 便 决定 了 我 们 未 来 的 页 面 结构 可 能 会 倾 司 于 一 个 对 称 结构 的 布局 。 
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二 、 设 计 分 解 
圆 、 方 、 三 角 的 设计 过 程 是 一 个 运气 和 理性 、 联 想 相 互 刺激 的 过 程 ， 他 们 晋 代 着 互相 推进 。 我 们 可 以 泌 墨 般 地 党 试 


无 数 种 万 案 ， 由 运气 不 断 刺 激 灵感 ， 灵 感 不 继 产 生 新 的 体验 ， 但 我 们 也 要 始终 把 握 住 理 性 的 续 绳 。 所 以 圆 、 方 、 三 角 的 
方法 将 经 历 两 个 三 步 ， 感 性 三 步 和 理性 三 步 。 


1. 感 性 三 步 


迷 汇 和 坚持 STEP 


使 用 圆 的 主 形 和 三 角 的 辅 形 进行 七 巧 板式 的 搭建 ， 我 们 可 以 设 定 基 础 
的 配色 ， 这 个 阶段 可 能 是 天 马 行 空 的 ， 有 着 多 种 不 可 预计 的 有 趣 结 果 在 等 
待 我 们 。 但 这 也 是 一 个 痛苦 的 阶段 ,大 多 时 候 我 们 无 法 定义 这 个 组 合 出 来 
的 图 形 ， 并 且 可 能 在 很 长 一 段 时 间 都 没有 结果 ， 在 这 个 阶段 我 们 要 做 的 最 
重要 的 一 件 事 是 一 一 坚持 。 


渐 入 住 境 srEP2 


灵感 可 能 在 不 定期 的 时 候 到 来 ， 残 像 等 竺 另外 一 半 的 爱人 一 般 ， 需 要 
原则 也 需要 包容 。 在 这 个 案例 七 巧 板 的 执行 中 我 们 可 能 意外 地 收获 一 项 小 
丑 帽 ， 小 丑 有 戏弄 搞怪 的 意思 ， 它 似乎 可 以 与 主题 产生 一 定 的 联系 ， 这 个 
时 候 我 们 可 以 选择 接受 ， 或 者 冲击 更 适合 的 灵感 火化 。 


情 投 意 合 ” STEP3 


第 二 个 火花 出 现 了 ， 它 看 起 来 像 一 条 鱼 ， 而 鱼 正好 与 需求 万 给 出 的 " 鱼 
人 六" 的 主题 一 致 ， 并 且 在 需求 的 活动 中 也 是 以 抓 鱼 为 主题 的 ， 这 是 一 个 令 
人 欣喜 而 兴奋 的 结果 。 我 们 将 市 着 这 种 热情 继续 下 面 一 个 步 又， 这 种 热情 
会 让 我 们 党 得 设计 是 一 个 多 么 让 人 兴奋 的 事 。 
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2. 理 性 三 步 


打 大 框 采 STEP4 


在 知道 了 策划 需求 后 ， 我 们 大 致 清楚 了 需要 一 个 对 称 的 人造 型。 根据 鱼 
人 这 个 概念 ， 我 们 通过 圆 、 万 、 三 角 的 基础 形状 打出 一 只 鱼 的 造型。 在 细 
化 万 宗 的 阶段 必须 确认 好 色彩 搭配 的 万 案 、 信 息 内 容 空间 容量 。 因 为 这 是 
一 个 逐步 确认 的 过 程 ， 这 个 时 候 我 们 需要 更 多 的 是 理性 . 


为 内 容 进行 布局 调整 SEPs 


这 个 部 分 主要 服务 于 信息 内 容 ， 包括 信 息 的 类 型 、 信 息 的 层次 还 有 修 
自 人 


控 驻 了 字 和 图 片 STEP6 


放 入 必需 的 图 片 和 文字 进行 空间 的 比 对 ， 并 进一步 切割 形状 、 丰 润 细 
节 ， 在 这 个 过 程 中 必须 注意 运用 颜色 和 形态 大 小 保持 每 个 版 块 的 主 形 ， 避 
免 过 于 琐 侠 。 
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三 、 册 面 展示 


19:00--23:00 


看 , 满 城 尽 是 “黑鱼 精 “， 你 进 族 不 想 折 者 一 
。 好 好 感 局 人 入 了 

慌 这 轩 有 加 种 是 人 六 本， 停 可 以 随意 扰 沁 一 种 

， 去 把 正在 这 束 的 “黑鱼 精 “ 们 记得。 


和 足 人 许 想 -小 龙头 : 二 宗 声 身 成 小 蕊 这 @ 只 要 你 搜 取 了 任务， 就 会 妆 志 
合 是 人 麻 斤 -时 天 大 : 符 玩 寄 夫 身 成 叶 天 大 的 
四 是 人 踢 标 -所 菇 。 : 村 于 浴 广 身 成 居 和 站 @@ 只 有 章 开 所 有 所 
生 是 人 放 毛 -人 参 果 : 要 和 京 安身 成 人 参 果 pf 


使 用 号 人 席 收 一 一 个 龙 娃 
打 断 地 人 的 祷 簿 和 人 状 老 
使 用 包 人 隐 修 一 一 赚 天 大 
打 断 好 人 的 汰 久生 人 拓 才 
使 用 如 人 尾 眉 一 一 起 下 

打上 断 凶 人 的 被 揪 太 人 状态 
使 用 司 人 出 检 一 一 人 天 黑 
打 断 粒 人 的 被 括 保 人 状 帮 


特别 成 就 寺 晤 


匆 香 法 丰县 击 案 4 








在 布局 完整 无 误 的 情况 下 疡 狂 随意 丰 肉 吧 。 加 入 小 饰物 和 质感 细 化 ， 使 得 画面 现 加 真实 、 杀 切 、 丰 富 。 一 张 有 爱 的 
思 人 页 面 残 这 样 快速 简单 地 完成 了 。 

设计 是 一 个 理性 + 运气 + 联想 的 过 程 ， 感 性 三 步 、 理 性 三 步 。 太 多 感性 则 可 能 会 使 受众 面 狭窄 或 者 偏离 主题 ; 大 过 
理性 则 显得 呆板 俗套 。 贺 、 方 、 三 角 不 仪 需要 三 个 元 素 的 形态 主 次 结合 ， 也 需要 感性 和 理性 的 双 同 互动 配合 。 
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因为 残缺 ， 它 有 了 与 众 不 同 的 故事 和 特点 ， 它 的 主题 性 和 目标 性 比 起 完美 的 东西 显得 更 加 强烈 ， 有 
时 候 ， 我 甚至 相信 : 只 有 残缺 的 东西 才 是 美丽 的 。 





OO 说 说 
A 2 因为 残缺 而 拥有 了 令 人 震撼 的 美 
() 想 想 
分 3 去 掉 局 部 、 选 取 局 部 、 蔡 换 局 部 
() 分 
那些 未 露面 的 视觉 强化 了 情感 的 重心 
() 做 做 
站 第 九 大 陆 神秘 站 、QQ 西游 感恩 季 
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因为 残缺 而 拥有 了 令 人 震撼 的 美 
断 甸 手术 是 一 种 推翻 正常 视觉 习惯 以 达到 情感 集中 并 强化 视觉 冲击 力 的 方法 ， 
非常 规 视觉 效果 带 给 人 们 情感 上 的 不 平衡 并 产生 冲动 ， 专 题 的 营销 特性 决定 了 设 
计 上 需要 这 种 强烈 的 情感 和 冲动 ， 它 不 能 像 领 导 的 致词 那 般 隐 用 或 一 团 和 气 ， 它 
立场 。 叫 和 手术 的 方法 通过 去 掉 局 部 、 选 取 局 部 以 及 替换 局 部 来 突出 核心 
思想 ， 让 特殊 的 视角 和 画面 带 给 观众 更 强烈 的 感受 。 








右 图 是 罗丹 的 断 臂 维 纳 斯 。 
罗丹 还 有 一 部 伟大 的 作品 "巴尔 扎 克 "也 是 一 具 残 缺 的 塑像 。 
罗丹 在 完成 这 苯 塑 像 时 ， 叫 了 几 个 学 生来 一 起 欣 黄 。 


雕像 的 造型 很 别致 : 巴尔 扎 克 披 着 睡衣 ， 双手 蔷 合 在 胸 前 ， 昂 着 硕大 的 
脑 安 ， 两 眼 注视 着 前 万 。 


一 个 学 年 指 着 下 人 的 双手 说 “老师 这 手 像 极 了 ! 我 从 来 也 没 见 过 肢 
完美 的 手 呢 。" 


然而 ， 这 名 赞美 的 话 使 罗丹 皱 起 了 眉头 ， 他 沉思 了 一 会 ， 突 然 举 起 一 把 
稚 头 ， 将 那 双 "完美 的 手 " 砍 了 下 来 ， 


学 生 们 都 疑惑 不 解 ， 但 罗丹 却 神色 严峻 地 这 道 : "这 双手 太 突 出 了 。 既 然 
这 双手 已 经 有 了 目 己 的 生命 ， 那 残 不 再 属于 这 个 雕像 的 整体 了 。 


枯 术 败 叶 


断 璧 维 纳 其 秃顶 的 脑 安 


紧 握 的 双手 缺口 的 酒 瓶 


因为 残缺 而 拥有 了 令 人 震撼 的 美 


也 许 是 为 了 顾全 大 局 的 整体 性 ， 而 砍 下 了 维 纳 斯 的 双 臂 ， 也 许 是 因为 它 
的 特 立 独行 而 选择 独立 的 空间 ， 不 论 是 删除 了 局 部 还 是 选择 的 局 部 都 因为 这 
样 一 份 残缺 而 使 其 本 身 更 具 故 事 性 和 震撼 力 ，5 引 人 关注、 上 友人 思 素 。 
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去 挥 局 部 、 选 取 局 部 、 蔡 换 局 部 
因为 残缺 ， 它 有 了 与 众 不 同 的 故事 和 特点 ， 它 的 主题 性 和 目标 性 比 起 完美 的 
东西 显得 更 加 强烈 。 有 时候， 我 甚至 相信 : 只 有 残缺 的 东西 才 是 美丽 的 。 








一 、 去 挥 局 部 


DENZEL WASHINGTON RUSSELL CROWE 
GANGSTER 


去 挥 局 部 是 在 原先 完整 的 整体 上 ， 为 了 更 好 地 突出 、 说 明 事 物 的 特征 和 主题 而 删 去 了 其 中 某 一 部 分 ， 它 为 主题 的 表 
现 排除 了 视觉 干扰 ,使 中 心 更 加 明确 。 去 掉 局 部 和 选取 局 部 在 某 些 情 况 下 是 相对 而 言 的 ， 但 两 者 都 可 以 做 为 一 种 独立 的 
思路 而 存在 。 


43 


形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 


7 HE WASTIEST. MOST SAVAGE AND BRAUN WO 
er YOUCOULD EVER WANT TQ SEE™ 


G2 ZB) MAW 


TERROR HAS EVOLVED 
IN THEATERS APRIL 4 


HITTING CINEMAS 19™ MARCH 2010 ee 
1 In This fall 


Daddys home. 


(和 一 一 一 全 
人 ‘ “EE 


IN THEATERS OCTOBER 16 





选取 局 部 通常 因为 选取 的 这 个 部 分 是 特征 的 集中 表现 , 它 的 独立 存在 能 代表 并 放大 整体 的 中 心思 想 ,使 主题 更 加 明确 ， 
情感 更 加 集中 ， 起 到 以 少见 多 、 以 小 见 大 的 功效 。 


三 、 蔡 换 局 部 


THISISIT 





-EB 


替换 局 部 是 使 用 更 能 表现 主题 的 事物 来 替代 特定 的 局 部 ， 从 而 使 主题 突出 。 局 部 的 替换 一 万 面 可 以 打破 观 者 的 习惯 
性 视觉 ， 另 一 万 面 蔡 损 事物 的 独立 风格 与 原 有 整体 结合 后 ， 特 征 更 加 明显 ，5 引 友 更 多 的 延伸 思 


去 挥 局部、 选取 局 部 、 蔡 换 局 部 都 是 通过 不 同 途径 和 手法 来 放大 特征 的 方法 ， 为 人 们 排除 干扰 、 选 择 重 点 或 获 换 来 
强化 表现 。 电 影 镜 头 和 海报 中 也 时 音 用 到 这 样 的 断 辟 局 部 描写 ， 当 我 们 习惯 了 处 在 采种 环境 之 下 ， 因 为 它 的 习惯 性 使 我 
们 的 行为 不 会 经 过 大 脑 的 思考 只 作 信 潜意识 进行 ， 但 如 果 我 们 换 了 一 个 视角 ,变换 了 处 境 ， 我 们 的 思维 又 会 再 一 次 活跃 
起 来 ， 这 也 是 断 辟 手术 的 功效 之 所 在 。 
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那些 未 露面 的 视 党 强化 了 情感 的 重心 


下 面 我 们 来 一 起 浏览 一 下 经 过 断 辟 手术 的 页 面 ， 它们 通过 去 掉 局 部 、 选 择 局 部 、 
碑 换 局 部 等 思路 突出 了 主 思想 和 核心 情绪 。 呐 析 的 过 程 中 主要 车 握 其 思路 和 方法 。 

















去 挥 局 部 


wy BATTLEFIELD 


BATTLEFIELDO ONLINE 


BiL | 二 到 
Lh i 


大 学 到 中 5 痢 


0| 册 三 至 鞋 呈 O01 君 吾 出 XH 


000 


alolx| 了 己 ok ol ee 
i 2lolaA} ?ls 3 人 十 可 pb 以 权 = 约 是 到 多 营 忆 1 全 记 





一 个 收集 勋章 的 活动 ， 所 以 它 去 掉 了 人 物 的 头 部 和 下 半身 ， 保 留 了 配 戴 勋 章 人 物 的 胸部 来 表达 这 个 主题 。 因 为 
ee 题 中 心 ， 比 起 一 个 配 哉 勋章 但 却 完 整 的 人 物 形 像 来 说 显得 更 为 有 效 。 
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RPG FPS/TPS 人 至 夫 / 双 0 名 9H 列 0IEE/ 申 局 / 竺 


这 个 页 面 的 SLOGAN 大 意 是 ， 你 还 坐 在 ; 


网 页 视 帝 设计 创意 折 展 与 快速 表现 


EA SPORTS™ FIFA ONLINE 2 


[TAN 
ifs 


# IE 二 对 六 


:oo 时 


ON FED 


齐 2 2 BN B10/ /HY 








令 的 调子 调和 看 不 清 





的 面部 表情 ,将 荔 努 和 


FO E CH : 


S57 








寺 发 的 情绪 包 于 在 心里 ,给 观众 一 个 重重 的 内 伤 。 i 


Ea Em OE 双子 poIBE7 国王 0f> 


I 襄 oO] DGHO1OHEI 5 775zx** (6.25 17:49) 


OE EA 


> 0 于 2078 鸡 的 





从 视 涡 上 很 容易 得 


艰 ou 





令 板 竞 上 么 ， 复 出 吧 。 作 者 把 关注 点 集中 在 了 角色 系 鞋 市 这 样 一 个 动作 上 。 


这 也 束 是 残缺 的 内 在 杀伤 力 。 


封 吕 500 王 号 潜 儿 C01 


出 这 是 一 个 金钱 美女 户 惑 的 游戏 ， 它 选择 了 性 感 的 大 腿 和 满 地 的 钞票 
曲线 ， 尺 度 汽 围 内 点 到 即 止 的 细 书 也 是 美女 性 感 的 可 选 表 现 途 径 。 








使 主题 更 加 突出 ， 当 然 红 层 、 
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二 、 选 取 局 部 


GOD 查 waAg 


RS UNITED STATES 


国 AUSTRALIA 
Wl BELGIE 

i CANADA 

SS DANMARK 
己 ESPANA 

Ld IRELAND 

二 LUXEMBOURG 
Wb MEXICO 

一 NEW ZEALAND 
二 OSTERREICH 
PORTUGAL 

已 SCHWEIZ 

D SUISSE 


3 svERIGE 


Ed BELGIOUE 
BRAZIL 
bi CANADA (FRI 0 
加 DEUTSCHLAND 
1 FRANCE 

Ld ITALIA 

二 LUXEMBURG 
三 NEDERLAND 
语 NORGE 

mw POLSKA 

ws RUSSIA 
SVIZZERA 

+ SUOMI 


so UNITED KINGDOM 







* 者 0f 课 寺 出 X 间 ok 人 击 


am 


如 7 对 :2011 妇 2 制 1 氏 ~ 27 型 


已 
如 于 各 到 和 人 UH0| 滑 如 基于 ;17 


oA Wa): 11 人 1, 14A], 19A| 
从 





神 ， 即 使 不 露出 全 脸 ， 我 们 也 能 深刻 感 
受 并 认 出 角色 的 形象 ， 另 外 通过 放大 角色 的 
脸 部 特征 ， 使 角色 的 精神 显得 更 为 犀利 。 整 
个 网 页 以 日 底 为 主 , 并 无 其 他 浅 饰 ， 却 使 战 
神 的 核心 特征 深入 人 心 。 


这 是 一 个 者 车 公会 挑战 赛 的 主题 ， 选择 
了 赛车 出 上 友 前 的 最 后 视角 ， 将 天 注 点 移 到 轮 
子 上 ， 更 能 体会 到 那 干 钧 一 及 的 时 刻 ， 有 一 
种 箭在弦上 的 宁静 张力 ， 人 气氛 罕 张 ， 游 戏 市 
入 感 强烈 。 
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形式 感 + 区 页 视觉 设计 创意 拓展 与 快速 表现 


NEXON 中 则 有 如 UA 村 WH Mgnt 三 了 4 并 7| ~ 


NEXTUPDATE +» WARFACE NEXT STEP 


WARFACE 2 CBT 
Wool tc} 


、 坚 民 0871 





WARFACE 官网 首页 ,通过 鞋子 、 血 迹 和 畦 旁 的 子弹 让 我 们 足以 感受 到 气氛 的 浓烈 ， 通 过 不 一 样 的 气氛 表达 万 
式 让 观众 耳目 一 新 。 


RPG FPS/TPS 么 王 友 /p01 oF/ 2 人 大。 业 惠 。 呈 三/ 列 贡 拷 Wy mr BATTLEFIELD 
2 0 Inrmi FAMESTANT 


20124 04Y 05 册 (到 ~ 2012.4 5 18 宙 (局 


BATTLEFIELD 


全 到 型 il 


几 吕 如 三 全 21912 拖 H 训 到 旨 公 1, 华 已 2 名 .2 于 HI7 了 栖 7 虹 硅 介 汪 对 ,到 时 开外 BP 呈 C| 于 持 刀 号 0| 叶 人 | 导 人 | 寻 短 量 0 民 ch 


KAKAND 
R15-4713 


“BATTLEFIELD 2nd ANNIVERSARY GIFT 








一 个 两 周年 的 活动 ， 亲近 的 视角 ， 唤醒 了 玩家 重 回 战场 的 渴望 。 
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到- qa: .ZZ .ZBuPImy 


二 三 对 听 受 , 0j0| 岂 , 可 忌 和 


口 1 喇 型 叫 型 导 人 上 层 圣 竺 A| 0 上 悍 汗 售 ?I0 口 己 对 计 贡 8t 车 8HE! 持 人 |0O 旧 


YH 


时 ?| 如 己 赴 LEH 


者 = 大 | 凶 51> 他 刘 到 中 





一 个 版 本 更 新 介绍 页 面 ， 放 大 的 视角 和 由 UPDATE 与 剑 间 组 成 的 血迹 ， 强 烈 的 游戏 氛围 让 人 对 新 版 本 更 加 


We 汐 
sw 2011 11 浊 24 人 一 公 | 


SATOF AI 全 na 
EL 





这 个 专题 SLOGAN 的 大 总 是 "给 心 电 波 最 强 友 动 引 | 擎 ”, 画面 中 由 血迹 和 呐喊 的 嘴 部 特写 构成 了 这 样 一 个 血脉 丙 
张 的 画面 。 配 以 这 样 的 SLOGAN 十 分 吻合 ， 气 氛 到 位 。 
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Hancame 则 xls| 甩 对 芭 ee1 1 0| 间 到 地 


DR 


A 人 I 和 mp 显 吕 全 十 IT 人 
me os7Rt 14 ~ 2008.09.10 


. 9 
- 二 
人 全 

Cadi 


He 


7GB TI 全 对 三 而 对 当 ，0| 于 放 一 71| 云 1CH! 


对 侍从 QiE| 让 9| 对 他 


二 了 会 于 蚂 2| 寻 于 | 信人 | 时 EE olE| 风 2| 对 











所 环 王 中 咕噜 对 魔 戒 的 渴 星 让 人 映 和 象 深刻 ， 特 别 是 对 眼神 的 刻画 ， 这 里 将 福利 包 妆 成 魔 戒 ， 将 着力 0 
眼神 与 魔 戒 之 间 ， 去 掉 了 咕噜 其 他 的 身体 特征 ,从 大 视 党 中 感到 到 宝贝 的 珍贵 和 唾 手 可 得 、 近 在 忆 尺 的 强烈 欲望 














LE mm 5) 
= 学 他 会 100% 局! 


[他 23°3 | , U3 | 


2 
\ gg of 
EI 





100% 获得 奖励 ， 作 者 将 视觉 的 镜头 直接 的 对 准 了 人 物 手 里 的 丰厚 现金 。 略 去 了 其 他 不 必要 的 部 分 ， 简 单 上 明了、 主题 
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三 、 蔡 换 局 部 


BGSametree A os nel seksel WB S27NUH | e201 | std 


201241 5 25WY ~ 2012U 6 28J 


丑 天 | 由 [ 己 时 


6 斑 9| 划 E010| 周 秋 2 诈 晤 村 于 冰 号 刘 全 ,对 C7| 三 圣 到 计时 对 0| 思 9UCH 


671 引 大 至 0H 贺 委 27 量 女 避 训 到 二 号 . 子 避 到 号 引 女 导 二 叫 寺 呈 亿 0| 汪 对 时 UCh 





眼力 够 好 , 睡 完 也 能 拿 到 奖品 
点 明 主 题 ， 让 人 耳目 一 新 。 


这 是 活动 的 主题 。 这 里 用 放大 的 纸 片 眼睛 替换 正常 的 眼睛 。 突破 了 常规 的 视 党 习惯 





EDITA'S, ABOUT PANTICPATE CALEXY ED CONIACTS FACIDOOK Le ED ABOUT PAKTICIPATE CALLERY EDIA CONIACTS 。 FACEBOOK Leen 


CASTING 





这 张 网 页 的 替换 感 沉 不 仅仅 体现 在 视 党 上 ,也 体现 在 交互 行为 上 。 它 通过 替换 和 组 合 不 同人 的 五 官 形成 有 趣 的 视 沉 ， 
这 种 替换 的 交互 行为 也 体现 出 了 多 人 参与 的 主题 。 





Mag 
Ri 









ON 20Fe yu 


对 于 一 个 完整 的 人 人像， 人们 通常 最 关注 的 是 头 部 ， 这 两 张 网 页 将 画面 中 的 人 物 头 部 奉 换 成 主题 视 腕 元素 ， 通 过 这 种 
视 完 的 差异 性 ， 达 到 了 强化 记忆 的 效果 ， 使 主题 更 加 突出 。 


51 


形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





第 九 大 陆 神 秘 站 、QQ 西游 感恩 季 


设计 的 万 法 多 种 多 样 ， 条 条 道路 通 罗 马 ， 从 结果 来 看 ， 它 可 能 从 圆 、 万 、 三 
角 的 路 上 过 来 ， EN 寻 出， 但 是 擎 握 不 同 万 式 可 能 让 我 们 
拥有 更 多 的 操作 空间 。 下 面 我 们 选择 一 个 日 弟 最 单 见 的 礼包 主题 ， 通 过 “ 断 臂 " 方 
法 为 之 动手 术 ， ey 





第 九 大 陆 神秘 站 


一 、 需 求 分 析 


机 


52 





许 戏 《 第 九 大 陆 》 测 试 的 神秘 站 ， 当 页 面 的 浏览 数 到 达 1000000 时 就 开启 测试 ， 而 1000000 也 是 站 点 的 神秘 数 
人 希望 宣传 的 氟 围 市 有 一 定 的 神秘 感 ， 并 突出 1000000 这 个 数字 。 





我 们 必须 给 玩家 体现 游戏 即将 开 测 的 强 有 力气 场 ， 却 又 留 有 犹 抱 琵 蔓 半 逐 面 的 悬念 ， 另 外 还 需要 突出 1000000 这 样 


于 是 我 们 利用 " 断 辟 手术 "的 万 法 进行 了 以 下 的 设计 。 


03 断 尼 之 碳 





置 入 主体 STEP 


1000000 这 个 数字 是 这 个 神秘 站 的 主要 信息 ， 而 战士 角色 是 
这 次 神秘 测试 使 用 的 主 形 像 。 我 们 将 必须 使 用 到 的 那个 大 视觉 先 


置 入 页 面 中 。 


新 臂 处 理 STEP2 


为 了 让 视觉 不 同 于 常规 ， 并 能 体现 出 神秘 的 气息 ， 我 们 将 仅 
半 庶 面 的 神秘 效果 。 并 在 其 脚下 


保留 战士 的 腿 部 ， 产 生 犹 抱 琵 车 
男 上 一 个 概念 的 弧 形 地 球 表示 大 陆 ， 产生 一 种 开启 和 占 岛 第 九 大 


陆 的 意味 ， 令 人 神秘 并 与 《第 九 大 陆 》 的 游戏 主题 相关 联 。 


信息 排 布 ssP3 


创意 和 布局 大 致 确定 之 后 ， 我 们 便 可 以 开始 委 载 入 其 他 的 一 
些 信息， 并 确定 它们 的 位 置 ， 由 于 这 个 页 面 信息 比较 少 ， 所 以 后 
期 的 信息 排 布 也 相对 简单 自由 一 些 。 信 息 确定 完整 后 束 可 以 开始 


正式 的 细 化 了 。 


这 


TIME & SLOGAN 


1000000 





53 





形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 


三 、 贝 面 展 示 


关 过 少 戏 生 后 记录 出 戏 成 长 讲 


(全 腾讯 游 中 晶 < 个 QQ 号 末 一 个 游戏 世界 议 欢 迎 末 到 脂 讯 游戏 ,请 马上 号 录 您 的 游戏 人 生 | 腾讯 游戏 


-110 0 010 








未 解 开 迷 团 的 数 子 、 勇 士 坚 定 的 双 腿 和 长 全、 隐约 洛 潮 的 大 陆 ,它们 通过 认 知 和 视觉 的 断层 引 友 了 观 者 强烈 的 好 奇 心 ， 
从 而 达到 了 “神秘 和 悬念 "的 主题 目的 ， 这 种 神秘 及 悬念 也 便 是 断 臂 手术 的 技法 优势 和 视 沉 之美。 
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医 QQ 西游 感恩 季 


下 载 QQ 西 游戏 转播 到 腾讯 微 博 


QQ 西洲 感恩 季 人 在线 给 力 适 


活动 时 间 : 2011.4.12 至 2011.5.15 每 晚 19:00-23:00 


第 1 步 接任 务 第 2 步 换 大 礼 


活动 时 间 找 到 活动 大 使 感恩 免 免 接 任务 ， 一 小 时 后 可 以 交 ECANL DE 
AN NE 可 以 找 感恩 兄 换 免 免 吕 换 丰厚 奖励 哦 ~ 
NPC 坐 标 : NPC 坐 标 :2520.760 

特别 提醒 : 我 只 在 19:00-23:00 出 现 ， 每 人 每 天 最 多 可 完成 特别 提醒 : 注意 : “无 公害 牧草 ”和 “有 机 
2 次 任务 哦 ~ 换 线 、 组 团 、 进 副本 都 不 会 影响 任务 完成 胡萝卜 ”请 在 2011.5.31 之 前 兑换 完毕 哦 ~ 


喝 换 奖励 清单 
兑换 物品 ”四 等 玲 天 感恩 回馈 公测 纪念 竟 换 物品 。 仙 灵 珠 x1 。 神秘 的 背包 x1 
宝珠 x1 礼包 x1 时 装 礼包 Xx1 


无 公害 牧草 1 1 1 无 公害 牧草 


感恩 回馈 礼包 


有 几率 开 出 如 下 物品 : 舞 狮 坐骑 、 极品 元 神 符 时 装 、 膀 50 级 、 金 色 图 纸 
神秘 的 背包 : 必得 一 个 翅膀 、 舞 狮 坐 骑 或 者 元 神 符 


点 击 查看 详情 














接 下 来 ， 我 们 以 最 第 见 的 "送礼 "网 页 为 例 ， 来 看 看 结合 感恩 季 的 送礼 主题 的 交互 。 送 礼 的 交互 稿 依旧 是 版 块 多 
字 也 不 少 。 主 题 是 ， 在 线 好 礼 给 力 送 、 接 任务 、 损 大 礼 。 
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需求 分 析 


堆积 如 山 的 礼包 


瘟 天 纷飞 的 礼 化 





ee 
昧 撤 的 彩带 有关 4 


特殊 的 奖品 图 上 三 


我 们 选择 一 个 最 大 众 的 送礼 主题 ， 并 选择 最 常见 的 表示 物品 的 "礼包 "来 做 试验 | 





态 守 以 六 仪 0 


0 刀 e 0 要 
5leSILI8? 号 呈 休 %LI8? sl 





设计 的 方法 多 种 多 样 ,只 要 切合 主题 ,并 且 美 观 ,怎样 都 没有 错 。 不 过 我 们 今天 要 震 试 用 我 们 的 断 臂 万 法 为 之 动手 术 。 
如 果 我 们 选择 最 普通 的 "礼包 "做 为 主 视 完 ， 利 用 断 辟 的 万 法 是 舍 能 做 得 和 从 前 不 一 样 呢 ? 
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二 、 设 计 分 解 


选择 对 象 。 。 STEP 


说 到 送礼 ， 我 们 直接 联想 到 的 是 礼包 。 如 果 想 设计 出 与 以 往 不 
同 的 视 竞 感受 的 送礼 专题 ， 我 们 如 何 从 礼包 的 表现 中 脱 舌 而 出 呢 ? 
在 琐碎 和 分 散 的 造型 中 ， 我 们 锁定 其 中 一 个 礼包 。 这 时 候 我 们 也 许 
会 选择 用 抄 现 实 的 万 法 进行 页 面 的 制作 ， 但 页 面 内 容 的 体 量 可 能 不 
允许 我 们 使 用 这 个 方法 ， 所 以 我 们 可 以 开始 做 他 的 尝试 。 


断 辟 手术 处 理 sTEP: 


为 了 让 礼包 的 表现 更 加 精彩 并 独特 ， 我 们 选择 使 用 断 臂 手术 的 
万 法 ， 选 择 了 礼包 最 精彩 的 部 分 ， 也 残 是 它 张 开 口 袋 撒 出 礼物 和 金 
币 的 那个 最 激动 的 瞬间 做 为 局 部 。 


-一 一 


me = 


"ES Le 


[ i 
相间 | 二 hy E 
i 了 je EE 
h -wy 
a 
下 


Ey 


a 





唱和 信息 位 置 设 想 ”STEP3 


通过 断 帝 处 理 ， 信 息 位 置 的 摆 放 也 有 了 合理 的 空间 ,我 们 让 内 
容 做 为 一 张 礼包 中 的 纸 券 ， 这 个 独立 的 面积 会 给 后 面 的 信息 排版 减 
少 不 少 麻烦 。 


六 = 






57 





形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 


HERE IS THE TITLE HERE IS THE TITLE S 


HERE IS THE TITLE HERE IS THE TITLE 


HERE IS THE TITLE HERE IS THE TITLE 


SLOGEN 


HERE IS THE TITLE HERE IS THE TITLE 


HERE IS THE TITLE HERE IS THE TITLE 


Le 
| 


HERE IS THE TITLE 


Fe 
HERE IS THE TITLE 党 





着 敌 的 背包 


EEE 人 
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Sp ry- 
概念 图 STEP 4 
根据 前 三 个 步骤 的 设想 我 们 开始 绘制 草图 ， 由 于 产品 的 主 
色调 是 赣 紫 色 ， 所 以 我 们 将 礼包 设 定 为 紫红 色 ， 信息 面 板 设 定 
成 监 色 。 钱 币 为 金色 ， 对 比 色 的 点 组 可 以 提 亮 整体 视觉 ， 让 色 
彩 感 受 更 饱和 。 


1EP SD 


信息 排版 设 定 


万 形 的 内 容 区 域 对 信息 排版 的 限制 比较 少 ， 高度 伸缩 起 来 
也 比较 方便 。 我 们 先 对 信息 进行 简单 的 分 类 ， 并 设 定 信息 模块 
的 主 书 ; 


S| 匡 P© 


填充 内 容 细 化 


根据 大 致 的 布局 进行 县 体 的 内 容 填充 和 细 化 设计 。 


03 断 名 之 于 





三 、 和 内面 展示 


DL 


~ . 
erred / 司 压 yp be A 嘲 ,， 2 
~ Lh 人 by De 

es 给 力 送 人 WS : 





由 于 调整 了 信息 的 比重 ,从 结果 来 看 ， 断 臂 的 痕迹 并 不 明显 ， 它 与 场景 结合 构成 了 另外 一 种 "完整 "。 不 过 我 们 也 从 
断 辟 的 万 法 中 找到 了 表现 礼包 的 新 万 式 。 不 得 不 说 断 辟 手术 不 仅 是 一 种 结果 的 呈现 ,更 是 一 种 寻找 新 创意 的 思路 和 途径 。 
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众 搞 故 纵 


需求 人 和 设计 人 之 间 的 矛盾 是 设计 的 永恒 话题 ， 如 果 处 理 不 好 通常 会 把 双 万 推 同 无 休止 的 互 钻 牛角 尖 
的 争论 ， 在 许多 需求 万 的 眼中 通 弟 没有 最 重点 ， 只 有 更 重点 。 不 过 近 两 年 中 国 的 设计 环境 似乎 稍 有 改善 。 








设计 过 程 中 ,我 们 的 周围 经 常会 充斥 着 这 样 的 声音 : 这 个 部 分 再 放大 一 些 , 这 个 颜色 再 明亮 一 些 ,我 
们 需要 更 炫 的 效果 .… 通 单 在 这 样 的 声音 充斥 下 我 们 很 容易 简单 地 使 用 加 法 ， 进 行 放 大 加 粗 提 之 ， 导 致 整 
NE . 


O02 
OO3 
LOCC 
Or 


说 说 
面 对 需 求 的 逆向 思维 设计 方法 


想 想 


/UN 


突出 也 可 以 通过 减弱 来 获得 


有 有 有 
设计 中 的 空 带 来 的 更 多 思考 和 情趣 


做 做 


QQ 西游 化 祭 页 面 


形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





S 面 对 需 求 的 逆向 思维 设计 方法 
它 是 对 设计 需求 的 逆向 理解 思维 ， 特 别 是 针对 变换 和 修改 过 程 中 的 需求 ， 
令 访 多 避 通 过 反 向 的 思维 打破 和 弥补 习惯 性 的 思路 ， 并 通过 这 一 思路 创造 出 不 同一 般 
VI “ea. 


需求 人 和 设计 人 之 间 的 矛盾 是 设计 的 永恒 话题 
需求 人 与 设计 人 之 间 的 修改 比拼 ， 不 仅 是 智商 的 比拼 ， 还 是 情商 的 比拼 ， 如 果 处 理 不 好 通常 会 把 双 万 推 同 无 休止 的 
互 钼 牛角 尖 的 争论 。 欲 扒 故 纵 不 论 在 沟通 还 是 设计 修改 中 都 是 一 个 可 以 选择 的 办 法 。 








热烈 再 热烈 一 点 


AAAWVWNYI -AAA YA VAN 





各 种 特效 各 种 飘 、 各 种 姿势 各 种 招 

在 许多 需求 万 的 眼中 通常 没有 最 重点 ,只 有 更 重点 。 设 计 过 程 中 , 我们 的 周围 经 常会 充斥 着 这 样 的 声 瘟 ,这 个 部 分 再 
放大 一 些 , 这 个 颜色 再 明 碗 一 些 ,我 们 需要 更 炉 的 效果 . 通常 在 这 样 的 声音 充斥 下 我 们 很 容易 简单 地 使 用 加 法 ， 进 行 放大 
加 粗 提 亮 ， 导 致 整个 画面 充满 了 重点 ， 充 满 了 重点 也 丈 意 味 着 再 次 失去 重点 。 





在 一 次 次 不 断 地 被 轮奸 下 ， 殊 有 了 如 下 的 产物 : 各 种 特效 各 种 飘 ， 各 种 姿势 各 种 招 …… 


Pe 


f 1 


Ej =h 4 NE 公 洲 2 /A 旬 ) > 
村 kh, . 





网 页 设计 中 的 “ 擒 ” 与 “ 纵 - 
"突出" 己 "减弱 "我 们 应 该 如 何 应 对 。 
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突出 也 可 以 通过 减弱 来 获得 


突出 ， 我 们 该 如 何 应 对 ， 习 惯性 的 加 强 法 可 能 使 排版 越 来 越 拥挤 ， 本 章 推荐 


;EE 的 是 适当 的 使 用 减法 ， 也 同样 能 达到 突出 的 目的 。 
/MS oie 












我 们 该 如 何 应 对 ! 








让 7 号 球 突出 有 几 种 方法 


突出 可 以 理解 成 是 一 个 相对 的 词语 一 一 相对 的 突出 。 这 种 情况 下 我 们 除了 加 强 本 体 而 产生 突出 的 效果 ， 也 可 以 通过 
判 寻 其 他 个 体 从 而 产生 本 体 的 突出 效果 ， 所 以 ， 我 们 来 做 个 小 实验 。 
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加 强 法 





色彩 结构 


加 强 法 是 基于 重点 7 号 球 本 体 展开 ， 我 们 在 色彩 和 结构 上 进行 加 强 法 操作 。 
色彩 加 强 法 包括 : 加 强 明 度 、 饱 合 度 等 使 其 更 明亮 、 更 显眼 。 
结构 加 强 法 包括 : 变 大 、 变 形 、 增 加 标识 等 。 











加 强 的 方法 有 很 多 ， 我 们 可 以 总 结 归于 色彩 和 结构 的 变化 ， 具 体 类 型 不 再 细 分 说 明 。 


减弱 法 














色彩 结构 


减弱 法 是 在 重点 7 号 球 以 外 的 球体 进行 操作 ， 我们 在 色彩 和 结构 上 对 其 进行 减弱 处 理 。 
色彩 减弱 法 包括 : 降低 其 他 物体 的 明度 、 饱 合 度 、 透 明度 等 ， 使 主体 更 加 突出 。 
结构 减弱 法 包括 : 减 小 其 他 物体 的 大 小 来 使 主体 更 大 、 更 突出 。 
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VS 
突出 OR 减弱 


加 法 
加 法 是 在 原 有 设计 基础 上 ， 增加 、 突 出 、 放 大 、 强 化 某 个 特定 部 分 使 其 得 到 突出 。 加 法 本 身 并 没有 问题 ， 它 是 一 种 
比较 直接 的 思路 ， 不 论 是 需求 万 还 是 设计 人 都 会 下 意识 地 使 用 这 种 办 法 ， 但 是 物 极 必 反 ， 过 于 频繁 地 单一 使 用 加 法 往往 





会 把 自己 运 上 绝路 。 


减法 
欲擒故纵 里 的 减法 是 通过 减少 缩小、 弱化 其 他 部 分 使 某 个 特定 部 分 得 到 突出 这 是 一 种 逆 同 思维 。 配合 加 法 一 起 使 用 ， 
可 以 避免 画面 过 说 拥挤 、 刺 眼 。 


We 





拥挤 OR 留 白 | 





满 


” 满 " 的 目的 本 身 是 希望 用 户 能 够 看 到 并 吸收 更 多 信息 ， 但 呈现 并 不 表示 会 被 看 到 ， 而 看 到 也 并 不 代表 会 被 记 住 。 如 
何 更 好 地 梳理 阅读 ， 让 用 户 保持 愉快 的 阅读 心态 ， 让 信息 在 合适 的 时 候 出 现 才能 真正 达到 " 满 " 的 目的 。 


a 


2 


宇 " 在 语义 上 似乎 处 于 " 满 " 的 对 立 面 。 但 它 对 内 容 的 吸收 率 往 往 可 能 比 " 满 "更 高 。 留 日 可 以 种 给 信息 更 好 的 阅读 性 ， 
也 为 设计 带 来 更 高 的 品质 感 。 如 果 在 拥挤 的 路 上 走 得 疲惫 不 堪 的 我 们 ， 不 如 反 其 道 而 行 ， 欲 擒 故 纵 ， 下 面 我 们 就 将 法 码 
移 同 右 面 ， 来 看 看 ' 空 ` 卉 的 别 样 风景 。 
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三 
设计 中 的 空 市 来 的 更 多 思考 和 情趣 
专题 页 面 的 快速 营销 特性 需要 我 们 适当 地 冒 一 点 风险 、 打 破 一 点 平衡 以 换 
取 视 觉 上 的 惊艳 。 下 面 我 们 结合 建筑 和 摄影 上 的 ' 空 "来 一 同 思考 和 分 析 ' 空 ,在 网 
看 页 中 的 应 用 ， 针 对 不 同 的 网 页 信息 内 容 我 们 应 该 如 何 处 理 。 我 们 也 把 页 面 分 为 内 
窜 较 少 的 、 内 容 多 而 加 深层 级 的 、 内 容 多 而 加 长 页 面 的 关 型 来 赏析 。 


建筑 上 的 空 


在 建筑 的 空间 设计 上 也 经 常 牺牲 空间 来 创造 鼠 伟 的 视觉 感受 。 














摄影 里 的 空 
县 影 中 也 常 利用 空白 引发 人 的 深思 。 
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内 容 较 少 的 页 面 
我 们 先 来 看 一 些 内 容量 较 少 的 简洁 排版 设计， 不 慌乱 的 空间 给 产品 赋予 了 专业 和 大 气 的 气质 。 


视 守 简洁， 作者 并 不 急于 将 下 面部 分 的 内 容 充 满 
@ ensowTrate 主 视觉 的 空间 ,而 较 大 量 的 留 白 反而 让 内 容 成 了 焦点 ， 
条 理 层 次 鲜明 。 


sharing 


个 页 面 作 者 选择 了 人 物 后 脑 勺 做 为 页 面 的 主 视 
多 ge 8 日 让 主 视 完 更 加 深刻 并 引起 对 内 容 的 兴 
趣 。 





一 双 蓝 兹 色 的 手工 皮鞋 ， 在 白色 底 上 颜色 显得 越 
| 发 鲜亮 ， 右 侧 针线 皮 尺 工具 ， 让 手工 皮鞋 这 个 概念 
加 突出 ， 配 上 简单 的 文字 介绍 给 人 以 冷静 不 喧哗 的 专 


了 re 和 业 味 道 。 
an 
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这 是 一 个 腕 屏 设 计 的 页 面 ， 灰 日 色 的 调子 给 人 以 男性 化 的 、 时 尚 的 、 冷 峻 的 味道 。 大 量 的 留 日 和 弧 线 行驶 的 汽车 以 
及 墨色 轨迹 的 刻画 形成 强 视 觉 节 奏 ， 因 为 背景 简单 ， 使 前 景 信息 和 画面 的 设计 显得 更 加 精致 。 






3 六 。 


GRAPHIC 
EXHIBITION 





ee 
OC 


Premium 
Design Studio 


WEB DESIGN 

GRAPHIC DESIGN 

DIGITAL MEDIA CONTENTS 
WEB PLAN, WEB MAINTENANCE 
MAJOR AGENCY OUTSOURCING 


简洁 的 配色 ， 让 页 面 效 果 明 快 鲜 丽 。 布 局 简洁 ， 内 容 清晰 。 
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cm 2 
二 、 长 页 面 

下 面 我 们 来 看 一 下 内 容 较 多 的 页 面 ， 在 内 容 多 的 情况 下 ,我们 是 否 还 能 以 空 的 形式 进行 设计 呢 ? 长 页 面 是 一 个 选择 ， 
它 能 尽量 在 用 户 不 跳 转 的 情况 下 通过 滚动 获得 所 有 的 信息 。 由 于 无 需 跳 转 ， 长 页 面 的 形式 适合 主题 相对 连贯 的 内 容 ,或 
者 在 设计 上 使 用 连贯 的 创意 以 保证 持续 阅读 。 除 了 页 面 的 连贯 性 设计 外 , 长 页 面 还 要 注意 因为 页 面 过 长 而 产生 的 疲劳 感 











下 面 我 们 来 看 看 几 个 长 页 面 设计 是 如 何 解决 这 些 问题 的 。 
A 整体 造型 让 信息 阅读 保持 延续 性 


丰 ”这 是 一 个 有 趣 的 长 页 面 。 玩 家 通过 浚 动 屏 幕 浏览 完 页 面 的 所 有 和 内容。 和 首 
屏 的 信息 相当 简洁 ， 用 户 进 入 时 看 到 一 个 瓶 盖 、 一 根 吸 管 以 及 由 几 个 气泡 组 
成 的 按钮 ， 用 户 可 以 通过 浚 动 鼠 标 进行 浏览 ， 顺 延 着 吸管 而 下 的 瓶 丑 和 逐步 呈 
现 了 页 面 的 内 容 。 创 意 连 贯 ， 交 互 也 很 有 趣 ， 视 竞 表 现 同样 精 彩 。 


机 





IAN PLOcH } 


中 2 


玩家 在 首 屏 时 看 到 的 是 产品 的 LOGO， 并 通过 吸管 的 引导 浏览 完全 部 内 
容 ， 在 形式 和 内 容 呈 现 上 都 充满 了 创意 。 我 们 将 几 个 关键 细节 放 大 如 下 。 
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A 
“人 9 ) 


"二 mm 人 


l 了 本 
Wy 


STRATEGIE DESIGN UMSETZUNG VEROFFENTLICHUNG 


下 


i™ BP 


MEIN WEBDESIGN PROZESS 
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形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 


虚线 箭头 帮助 页 面 保持 连贯 色彩 变换 消除 疲劳 感 





2 Te 
导 Snm Au 
Rayr ni 个 ora | Pi pg 、 
BK. BUT WHY 
SHOULD | PING YOU? 














MEAT THERMOMETER 





5 | oe SE 二 
FRIDGE THERMOMETER 


Ww 
SAN i ee yy TO el 
vA Ure OA 


few STNETIrY ey 
[OS Sl 
py 
mn ss. 


0 
'®© 
除了 形态 设计 能 让 长 页 面 连贯 ， 虚 线 和 箭头 也 有 保持 这 个 页 面 内 容 排 版 轻松 ， 但 却 通过 板块 间 强 烈 的 撞 色 





持续 浏览 连贯 性 的 作用 。 这 个 页 面 将 两 个 在 空间 上 大 跨度 。 对 比 膏 造 了 刺激 的 气氛 。 主 视 沈 形 像 鲜明 信息 干扰 少 ， 主 
的 内 容 通 过 虚线 和 箭头 串联 在 了 一 起 ,于 绘 形式 也 很 有 趣 。 ， 题 突 出 。 内 容 部 分 通过 路 牌 计 温 器 贯穿 所 有 内 容 。 人 在 轻松 
的 排版 中 制造 了 强烈 的 气氛 ， 色彩 丰 证 却 整 体 连 贯 。 
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GRAOEN & JENNY 
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INTRODUCE 
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STRATEGY 


» Jw 


{MARKETING 
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BM 
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A CME 
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CGNTACT 


SPLUS 圣 信人 IE 型 全 做 引 S 居 UD. 


hr 





hoot Es 


空 的 留 白 让 信息 的 排版 和 阅读 更 加 轻松 ， 并 利用 页 面 统一 的 线性 元 素 贯 穿 整 体 视 竞 ， 页 面 虽 长 但 统一 连贯 。 
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三 、 多 层级 页 面 
层级 的 收纳 既 能 满足 内 容 的 展示 需要 ， 又 能 保持 界面 简洁 大 气 的 需要 。 


Re 


吾 杰 本 和 | 5 golE 
es sr Weritrap Sid 


Charxre 5 


型 计 AS :ao 


二 丑 副 烛 O1Hi -ee ea se se sn amo 


Ol var ny Ws 


Ne 





Tera 的 资料 站 ， 和 舒适 的 子 间距 ， 民 好 收纳 和 殉 分 的 视 竞 展示 裕 间 让 新 资料 的 推出 宛 满 诱惑 。 
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网 页 视觉 设计 创意 拓展 与 快速 表现 


7010| 因 
- 


站 出 对 口号 令 划 训 二 





C9 的 资料 站 ， 和 Tera 的 布局 排版 及 理念 近似 ， 都 在 收纳 上 有 比较 好 的 表现 并 给 
视觉 以 较 大 的 展示 空 司 。 画 面 简洁 、UI 局 平 轻 注 却 不 失 洲 戏 性 。 
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QQ 西 许 化 条 页 面 


让 我 们 也 来 试 一 试 ， 解 决 满 变 空 的 三 大 问题 ， 疼 试 一 下 如 何 将 一 个 普通 的 多 
内 容 的 需求 改造 成 一 个 内 容 排版 轻松 不 拥挤 的 、 创 意 和 连贯 不 落 俗套 的 气质 型 页 面 。 





ES 区 QQ 西游 花 祭 页 面 
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一 、 需 求 分 析 


我 们 来 看 看 收 到 的 需求 
(1 ) 信息 量 : 这 是 一 个 体 量 适 中 的 页 面 。 
( 2 ) 主题 : 花 祭 ， 专 题 需求 的 大 意 是 原来 的 游戏 SLOGAN 被 勒令 停 用 ， 和 希望 玩家 来 祷 念 同时 选 出 新 的 SLOGAN ， 
参与 者 将 获得 一 份 礼物 。 
(3 ) 调 性 定位 : 从 需求 万 得 到 的 调 性 要 求 为 表 伤 ， 但 虽然 是 祭 莫 ， 却 不 能 瓯 怖 或 愤恨 ， 并 且 要 让 人 看 到 新 的 希望 。 
这 种 调 性 区 别 于 抽奖 、 庆 祝 等 欢乐 的 活动 。 我 们 选择 了 壮美 的 调 性 ， 而 空 日 、 安 静 正 好 可 以 体现 出 这 种 到 伤 


的 情怀 。 但 内 容 繁 多 ， 我们 应 该 如 何 处 理 " 空 的 表现 。 





连 员 性 问题 二 量 _ 存 在 成 避 题 因 _ 疫 劳 成 眉 题 _ 


. 


76 


04 欲擒故纵 





二 、 设 计 分 解 


1. 空 





娶 个 妖精 做 老婆 


妖 性 文化 


(1 ) 减 小 一 屏 显示 内 容 ， 制造 一 个 空灵 安静 的 祭 莫 气氛 。 





自 


LO 


(2 ) 视觉 反差 也 让 用 户 关 注 到 了 这 个 页 面 ， 并 且 快 速 阅读 到 了 "人 花 祭 "这 个 主题 


了 | 


(3 ) 余下 的 内 容 将 继续 保持 空 的 妻 美 调 性 ， 并 进行 分 页 处 理 。 
下 面 我 们 来 看 看 由 分 页 产生 的 问题 该 如 何 解决 。 





连贯 性 问题 
各 \ y 
PS 
~ Bl 
2 y 


(1) 为 了 满足 阅读 的 连贯 性 ， 与 需求 万 商 量 ， 将 原来 的 " 献 化 、" 选 新 SLOGAN”"、“ 转 友 微 博 "、“ 视 神 墙 "的 无 连贯 
性 标题 改 为 市 有 情感 主题 色彩 的 、 连 贯 的 人 论 愿 、“ 伦 种 "、' 花 办 "、' 论 祭 "， 使 花 察 的 情绪 贯穿 全 文 ， 并 最 终 
收尾 回 到 ”从 和 祭 "。 


(2 ) 用 虚线 隐喻 化 瓣 亚 沙 的 曲线 ， 通 过 曲线 形态 贯穿 整体 形 ， 不 出 现 断 层 。 
(3 ) 利用 1、2、3" 上 暗示 浏览 者 正文 的 内 容 存在 。 
(4 ) 利用 "箭头 "进行 阅读 指引 。 
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3. 存 在 感 问题 





A 》 
Nd @ EL Q - 
pp 
< ,| La a 
Vv \ 人、 
~» PY 区 人) 全 © 
人 NS so ap = | 
， a 总 > 过 二 
A 
Ee 奖 - | 
外、 > Re 1 
人 花瓣 立体 的 纸 质 感 装饰 的 花 与 彩 市 


(1 ) 利用 灭 落 的 花瓣 交待 上 下 空间 感 的 存在。 
(2 ) 利用 立 起 的 纸 面 交待 前 后 空间 感 的 存在 。 


(3 ) 加 入 论 和 彩 市 等 重点 沪 饰 使 页 面 不 全 于 过 于 球 浮 。 





(1 ) 利用 冬 体 增加 趣味 性 减少 因 长 时 间 日 色 而 引起 的 疲劳 感 。 


( 2 ) 在 滚动 三 屏 白色 主 调 过 后 进行 变色 处 理 ， 让 眼睛 进行 分 类 休息 。 增 强 对 画面 的 记忆 。 
(3 ) 托 部 制作 二 级 主 视 苋 ， 在 长 时 间 安 静 阅 读 中 ， 起 到 一 定 的 提神 作用 。 


(4 六 外 可 以 在 顶部 放置 彩 重 遂 惑 ,让 玩家 到 底部 寻找 答案 或 礼品 等 都 可 以 增强 阅读 兴趣 减少 疲劳 感 并 保持 连贯 性 。 
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人 


一个 QQ 号 到 二 个 游戏 也 界 
关爱 六 总 生 震 . 沁 巡 大 戏 后 长 t 






纪念 & 坚 持 





》 是 一 款 以 西游 记 为 监 本 ， 玩 宗 穿 越 式 体 脸 “ 妖 一 道 一 仙 ” 
星 界 观 的 3D MMORPG， 是 一 群 筷 捧 3D MMORPG 矢 戏 的 和 









2 西游 所 绿 勒 的 妖魔 世界 观 里 生 行 车 费 忆 





县 去 管 的 


“要 个 妖精 做 老婆 ， 忆 


上 上班， 换个 佛祖 末 拜 党 ” 


COPYRIGHT 8 — 2010 TENCENT ALL RIGHT 
洒 : 


2 


入 欢迎 来 到 腾讯 游戏 ,请 马上 登录 您 的 游戏 人 生 | 腾讯 游戏 
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思 坤 大 亏 移 


时 间 短 、 没 点 子 、 没 创意 ， 又 要 快速 捕捉 眼球 , 怎么 办 ? 





对 页 面 整体 进行 旋转 和 平移 是 快速 改变 视觉 的 快速 有 效 万 法 . 它 打 破 了 正常 的 网 页 视 完 习惯 ,吸引 了 
观众 的 注意 力 。 


() 吕 2 
旋转 和 平移 
(已 1 想 想 ( 旋转 ) 
整体 旋转 、 背 景 旋转 、 综 合 旋转 
() Q 7 看 看 ( 旋转 ) 
和 脑袋 让 世界 与 众 不 同 
( )Y9 " ) 做 做 ( 放 转 ) 
QQ 西游 鹊桥 难 
想 想 ( 平移 ) 
() S OD 上 下 格局 、 左 右 格局 、 混 合格 局 
() S / 看 看 ( 平移 ) 
霸气 侈 漏 同样 精彩 
| ()() 做 做 ( 平移 ) 
QQ 西游 装机 专题 
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旋转 和 平移 
打破 正常 的 视觉 习惯 ， 不 对 称 和 和 斜 线条 的 视觉 也 可 以 造成 设计 上 的 速度 感 
的 冲击 力 。 这 是 一 个 相对 通用 的 办 法 ， 在 没有 更 好 的 点 子 和 创意 的 情况 下 ,不 
1 妨 党 试 使 用 。 


万 代 打 腊 了 没 激情 


点 子 用 光 了 时 间 短 还 要 形式 感 


设计 唤 哮 党 





i 本 四 
文字 这 和 俊 A 漂 涉 难 把 握 版 块 这 么 
模板 太 呆 板 了 
如 果 每 天 要 面 对 着 巨大 的 需求 量 ,难免 有 创意 村 调 的 时 候 ， 如 果 有 -一些 相 对 讨 巧 的 办 法 ， 能 够 不 受 主题 限制 ， 当 然 


是 再 好 不 过 的 ， 这 时 候 ， 我 们 不 防 试 试 这 个 简单 的 小 办 法 。 





旋转 和 平移 ， 这 是 针对 整个 页 面 的 大 版 式 而 言 的 ， 到 的 会 造成 怎样 一 种 效果 ， 我 们 继续 往 下 看 。 
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图 二 : 旋转 


加 有 | 





图 一 : 一 张 优质 稳定 的 摄影 图 片 。 

图 二 : 旋转 后 的 不 稳定 构图 使 图 片 显得 活泼 而 有 趣 。 

图 三 : 重心 右 移 ， 打 不 对 称 的 构图 增强 了 画面 的 紧张 感 。 

这 种 最 快速 改变 视 项 结构 的 简单 方式 ， 可 以 快速 地 运用 于 网 页 中 吗 ? 





图 一 : 正常 图 二 : 旋转 图 三 : 平移 


I | 


到 一 : 正音 的 页 面 版 式 ， 居 中 对 齐 ， 稳 定 整 齐 ， 稍 显 采 板 。 

到 一 画面 中 心 旋转 30 大。 

天 三 : 整体 画幅 同 右 平移 。 

看 起 来 似乎 可 以 这 么 干 ， 但 它 也 将 给 我 们 市 来 其 他 一 些 细节 上 的 难题 。 
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IA 的 三 种 方法 ， 以 及 解决 旋转 过 程 中 会 遇 到 的 一 些 问 题 。 


三 整体 旋转 、 育 景 旋 转 、 综 合 旋转 
转 旋转 : 在 原 有 页 面 的 基础 上 通过 对 页 面 中 的 背景 、 文 字 、 线 /条 等 进行 一 定 角 
ph | 本目 党 要 避 结 了 放 


运动 的 利和 
适合 的 主题 ew 


温 列 的。 速度 感 的 


旋转 适合 的 页 面 及 其 产生 的 效果 


旋转 打破 了 画面 横 平 竖 直 的 采 板 ， 旋 转 后 的 视觉 更 加 轻松 活跃 ， 旋 转 构 成 的 笠 线 条 也 可 以 产生 运动 和 速度 感 ， 所 以 
许多 运动 的 、 刺 激 的、 具有 速度 感 的 主题 适合 直接 旋转 处 理 ， 另 外 运动 、 速 度 衍 生出 年 轻 、 时 尚之 类 的 主题 也 适用 ， 轻 
微 的 旋转 也 可 以 使 画面 更 贴近 于 目 然 的 生活 状态 ， 增 强 真 实 性 与 杀 切 感 。 但 在 开始 旋转 设计 改造 之 前 ， 一 定 会 有 人 产生 
这 样 的 疑惑 。 


时 尚 的 





有 中 司 六 仿 下 内 容 内 容 会 超 HT 男 帐 啊 | 


站 转 重 构 的 哥 姐 会 咱 哮 蚊 ! 


难 通 要 用 户 扭 看 脖子 看 么 ? 
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旋转 可 能 会 给 我 们 市 来 的 问题 


(1 ) 信息 量 的 限制 
由 于 旋转 的 构图 ， 和 斜 线 与 面 边 、 面 框 最 终 会 有 一 个 交 春 点 ， 可 能 导致 信息 不 能 无 限制 的 延续 。 





(2 ) 排版 的 限制 
由 于 旋转 的 形式 需要 整体 的 配合 ， 而 有 部 分 素材 无 法 配合 旋转 束 会 比较 费时 间 去 归纳 处 理 。 


(3 ) 浏览 舒适 性 问题 
由 于 角度 倾斜 打破 了 习惯 性 视 羌 ， 在 提神 的 同时 也 会 给 浏览 造成 一 定 的 困难 和 不 舒适 。 


一 止 5: 走 寺 几 


这 些 都 是 我 们 需要 注意 和 解决 的 问题 ， 市 着 这 些 问题 ， 我 们 一 起 来 看 看 旋转 的 一 些 洪 规 则 : 





图 一 . X 图 二 : Xx 图 三 : V 


在 冬 排 时 注意 几 个 要 点 ， 以 免 影响 阅读 。 

(1 ) 非 内 容 必 要 原因 ， 文 字 尽 量 保持 一 定 的 规律 排 布 对 齐 。 

(2 ) 非 内 容 必要 原因 ， 并 列 内 容 尽 量 使 用 同一 变换 角度 。 

( 3 ) 图 三 为 正确 的 变换 方式 
这 些 错 误 看 起 来 显而易见 ， 但 在 实际 的 操作 中 ， 由 于 多 种 因素 的 干扰 我 们 往往 忽视 这 些 问 题 
在 画幅 已 旋转 的 情况 下 更 应 该 保持 理性 。 


在 简单 的 图 示 下 ， 
在 排版 过 程 中 无 论 如 何 我 们 都 要 尽量 让 页 面 依照 某 一 规律 对 草 ， 
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旋转 基本 可 以 分 为 以 下 几 种 类 型 


Sieic 
© 





图 一 : 整体 旋转 图 二 : 背景 旋转 图 三 : 综合 旋转 


(1 ) 整体 旋转 : 背景 和 内 容 一 起 旋转 ， 需 要 注意 两 条 边 绿 线 ， 一 是 要 保持 旋转 的 边 绿 线 整齐 ， 另 外 也 要 注意 旋转 后 
的 内 容 不 能 超出 1000 像素 宽度 。 为 了 兼顾 信息 的 可 阅读 性 ， 育 景 和 内 容 同时 旋转 的 角度 尽量 不 要 超过 15 度 。 

(2 ) 背景 旋转 : 背景 旋转 ， 信 息 内 容 保持 不 变 。 这 种 旋转 既 可 以 产生 旋转 的 视 况 形式 感 ， 又 可 以 保证 文字 信息 的 
阅读 性 ， 是 推荐 和 单 用 的 万 式 。 但 信息 排版 同样 也 受到 矢 线 的 1000 像素 宽度 的 限制 ， 在 具体 操作 中 需要 进行 
细节 的 调整 。 


(3 ) 综合 旋转 : 根据 内 容 结 构 进 行 有 选择 的 部 分 旋转 。 通 常 选择 内 容 文 字 较 少 的 SLOGAN 跟随 背景 一 同 旋转 共同 
达到 旋转 的 形式 感 。 信 息 量 较 多 的 正文 保持 水 平 不 变 ， 以 万 便 阅 读 。 这 种 万 式 也 经 常 被 使 用 。 


黄 底 为 1000 像素 帝 度 的 内 容 面 积 、 蓝 底 为 背景 面积 、 白 色 虚 线 为 1000 像素 宽度 标准 线 、 
SLOGAN( 主 视觉 标题 )、 文 字 、 Ee de i R( 对 
于 1024 像素 用 户 的 最 大 网 页 宽度 的 定义 ， 不 同 的 公司 有 不 同 的 标准 ， 通 常 是 在 1000 ~ 1004 像素 范围 ， 
为 了 美观 ， 设 计 上 通常 可 多 保留 一 些 外 边 距 ) 。 
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和 牌 脑袋 让 世界 与 众 不 同 


Wa 下 面 我 们 来 分 别 欣 赏 几 组 旋转 的 页 面 设 计 ， 小 角度 的 旋转 可 以 为 页 面市 来 目 
然 轻松 的 心理 感 党 ， 旋 转 的 任 线 与 边界 形成 的 三 角 可 以 让 页 面 看 起 来 更 加 时 尚 ， 
旋转 也 可 以 增强 画面 的 锐利 感 和 速度 感 ， 适 合 运 动 类 和 速度 类 的 产品 。 








一 、 人 整体 旋转 


OHansame 名 J | 0 半生 二 所 | 公司 和 0l0P1 到 吧 Ojoj0OIg | 二 了 


> 





wa oem 文字 的 旋转 形成 了 有 趣 的 立体 空间 。 微 量 的 旋 
转 保证 了 信息 的 阅读 ， 不 过 灰色 按钮 部 分 的 文字 阅 
读 性 稍 弱 ， 当 然 这 也 是 旋转 的 一 个 允 端 ， 不 过 整体 
表现 还 是 十 分 精彩 。 








WARRION 
RE Py 
“ey og WANN DLL Lf WE ‘ 
(局 页 投 计 关 取 时 www G8dorignnet MABE BEG MPF PN 


WES WE LEE UN 


be 


这 是 "一 句 话 小 说 "征文 比赛 的 活动 页 面 ， 作 者 用 手写 的 万 
了 式 来 表达 ， 通 过 小 小 的 旋转 让 手写 的 轻松 状态 表现 出 来 ， 增 强 
了 页 面 的 杀 和 力 。 整 体 旋 转 可 以 减 小 旋转 的 角度 ， 以 保证 信息 
的 阅读 性 。 





这 是 一 个 格斗 游戏 网 页 ， 人物 的 动感 和 透视 感 
都 十 分 强劲 ， 配 以 轻 量 旋转 风格 的 页 面 ， 放大 了 战斗 
中 的 速 戎 感 、 刺 激 感 和 不 稳定 感 。 鳌 体 视 竞 动感 酷 炉 ， 
战斗 感 十 足 这 种 旋转 比较 适合 于 运动 的 、 速 度 感 的 、 
刺激 的 、 时 尚 的 主题 类 型 。 
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人 ， 





这 个 案例 的 文子 纵 回 垂 直 对 齐 ， 横 回旋 转 ， 信 息 的 阅读 性 展 好。 背景 旋转 形成 的 笠 线 让 画面 充满 了 运动 


感 和 速度 感 ， 与 篮球 的 运动 主题 十 分 贴 合 。 





EDTUD TD 7 ~ IO. B27. 
3 ls PR 2010 221| 2 0 OW + 2 7h 
OSB 980! 2010 T2101 FYE2) EPN § VES EE SNKL 


FZ VAHL . 
ALIEo Gud 


2010U 108 1Y ~ WW 7 


7 VELH 
MISSTOM FF Ev ET 
到 于 人 UIO 阮 1 刘 敌 0{ 
pIGL/ TF“ 


HSSNOM OD {§ 2/ 乡 AN J 
3 0 HCPA - GLE 


A efOICH 


EE MHSSION F 
7 iol 10210HA} Yo MA 
Diol Ww71 be X| DK4 晤 忆 年 吝 本 


MNSSIOMN NLF EE 


¢ 一 
a - 2010 3210} B22| 


y 如 人 型 名 1 虹 
by “是 让 代 可 对 191 叶 20 时 2 


有 


7 


BNW 去 A 











与 上 个 案例 相 呼应 ， 这 张 页 面 的 文字 是 横 癌 水 平 对 齐 ， 纵 向 旋转 ， 以 斜 线 万 式 对 草 的 。 我 们 看 到 背景 的 
旋转 也 是 与 文字 保持 一 致 的 。 赛 车 的 速度 感 与 旋转 的 形式 感 搭配 ， 让 主题 和 形式 相辅相成 。 
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二 、 青 景 旋转 

我 们 可 以 看 到 这 个 页 面 的 文字 信息 基本 保持 着 水 平 
的 状态 。 黑 色 与 白色 的 背景 的 斜 切面 构成 了 整体 的 形式 
感 。 黑 白 的 对 比 和 贯穿 页 面 头 尾 斜 线条 都 让 页 面 的 视觉 
产生 了 强烈 的 视觉 冲击 力 。 不 过 在 大 刀 阔 其 的 形式 感 设 
计 背 后 ， 文 字 的 排版 还 需要 小 心 出 酌 处 理 。 这 个 页 面 统 
ra 一 采用 了 右 对 章 的 方式 。 左 侧 文字 的 排版 也 恰好 与 斜 线 
ee 相 契 合 。 这 需要 我 们 在 制作 过 程 中 对 内 容 进行 一 定 的 纺 
排 和 修整 ， 以 使 其 整体 看 起 来 更 加 舒适 。 






| 吉 回 圭 回 开创 | 至 要 合 LICH 3 旦 eol 


A El CBT 






人 到 天 |[ 丘 关 9| 地 境 0| 导 0| 异 必 LICch 
[ere nena ee …… 


者 丑 志 时 0| 上 引 到 型 如 2 忆 三 吉 0| 吉 所 XH 


和 
I oy + 7 L291 


2 EE NR ee om WAD RT TE 


右 侧 两 个 页 面 的 形式 是 比较 相近 的 。 同 样 使 用 了 两 
个 强 对 比 色 的 背景 配 以 和 斜 线 组 合 。 只 是 上 一 个 是 横向 的 
斜 线 ， 下 一 个 是 坚 向 的 斜 线 。 视 党 响亮， 简单 的 调整 也 
能 使 页 面 充满 形式 感 。 
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三 、 综 合 旋转 


FPS-TPS | A228.MOH | RPG | OLE | 2 | 天 EN a olay a Emo Ge 舍 = 河 


ra 
1 we 


Loo 
SS 


Ee 人 lole sy 7] 对 川 5 伍 
会 715Ih 2010 人 周 L| 生 言 对 痉 
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FPS'TPS | 和 至 云 : 囊 Ol 对 | RPG | OHOIS: 包 村 | 卫 和 虽 放 到 | 至 天 放下 | 旺 E | 关 季 对 ofoId 导 娃 2JeieIAR | HS 娃 J8| | 到 型 7 恒 全 
| 


7/////2 hp 821 BE 


9 D2 BBE 
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二 
) 


fy 





ww 


这 两 个 页 面 排版 形式 相近 ， 都 选择 了 头 部 SLOGAN 旋转 的 形式 ， 并 把 SLOGAN 和 正文 明确 分 割 开 
以 避免 角度 的 不 同 造 成 的 阅读 干扰 ,信息 量 较 大 的 正文 置 于 下 面 保持 水 平 ， 让 页 面 形 式 感 和 阅读 性 并 存 。 
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是 天 09 局 亿 地 和 到 四 
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害 天 对 他 

Laol 裂 个 

人 Hi 到 则 至 人 
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这 个 页 面 的 综合 旋转 方式 十 分 讨 巧 ， 它 放大 了 SLOGAN 中 的 Q 字 ,将 正文 内 容 置 于 其 中 ， 整 体形 
式 感 十 分 强烈 ， 并且 阅读 性 很 好 。 达 到 了 形式 感 和 舒适 性 的 双 丰 收 。 


GAME INFO COMMUNITY DOWNLOAD SUPPORT 
a my 州 虽 全 难 于 PU | 王 济 对 贡 
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cs ANIEARk Cj 里 ( 笃 ) 烛 亿 各 阐 :| 各 -人 -E069 切 本 对本 导语 如 2010 材 刍 | 委 0063 立 全 下 0| 灶 ; 寺 圣 至 

月 苗 放 叫 革 子 立 嫩 后 1606e 羽 CJ EMM 准时 12 爸 卫 双 六 566-516 FaxD-635-179] 
Copyrigh ® CJ Miarmet. Com, A Fits Researw 





圣 微 旋转 元 素 的 加 入 也 能 使 画面 生动 起 来 ， 这 个 正统 的 官网 页 面 ， 两 道 红 色 和 斜 线条 的 加 入 打破 了 呆 
板 的 页 面 形 式 。 大 按钮 和 SLOGAN 的 旋转 配合 ， 使 整体 视觉 更 加 统一 。 
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ou 
QQ 西游 前 桥 难 

下 面 我 们 选择 Q Q 西 游 七 夕 交 桥 难 的 专题 来 进行 尝试 ， 施 转 不 仅 适用 于 一 些 
速度 感 或 运动 类 的 主题 ， 它 也 能 让 日 常 的 专题 通过 旋转 产生 新 的 创意 和 联想 ， 开 
拓 了 思路 ， 下 面 我 们 一 起 来 看 一 看 





QQ 西游 的 桥 难 
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一 、 需 求 分 析 


这 是 《QQ 西游 》 新 版 本 上 发 布 的 广告 落地 专题 ， 新 版 本 的 名 字 叫 " 况 桥 难 `， 而 这 个 版 本 也 将 结合 七 夕 这 样 一 个 时 间 点 
正式 友 布 。 " 况 桥 相 会 "也 成 为 了 画面 的 主要 视觉 。 


传统 思路 


说 起 更 桥 相 会 或 者 七 夕 ， 我 们 的 第 一 直观 画面 大 致 是 以 下 两 种 类 型 : 剪影 的 男女 相 会 ， 脚 下 踩 着 一 座 桥 ， 杰 或 是 穿 
着 情侣 套 妆 的 男女 相 拥 ， 身 后 云彩 水 朱 …… 对 于 一 些 没有 情侣 套 委 的 游戏 人 物 ， 有 时 只 能 将 两 只 目 露 胸 光 的 ， 喔 打 锁 字 ， 
是 凶 光 , 目 露 凶 光 饱 合 杀 气 的 男女 主角 硬是 凑 成 了 佳人 一 对 。 不 过 素材 的 限制 有 时 也 是 比较 无 奈 的 ,暂时 抛 开 素材 的 问题 ， 
想 想 我 们 如 何在 这 种 传统 表现 手法 的 基础 上 让 目 己 的 网 页 稍 显 特别 呢 ? 





旋转 的 灵光 乍 现 


经 验 并 非 都 是 好 事 ， 经 验 市 给 我 们 习惯 性 的 思维 ， 叱 可 能 会 让 我 们 更 快 地 做 出 判断 ， 但 过 去 正确 的 判断 在 今天 并 不 
一 定 束 是 适当 的 、 正 确 的 。 当 我 们 见 惯 了 某 种 传统 的 版 式 ， 在 设计 的 时 候 多 少 有 点 失去 激情 和 创新 的 动力 ， 在 依靠 经 验 
设计 的 长 期 设计 者 看 来 ， 面 对 传统 版 式 ， 接 下 去 的 动作 无 非 束 是 在 头 部 加 入 男女 相 拥 的 主 视觉 然后 继续 添加 完 应 该 有 的 
信息 和 内容， 凭借 经 验 融 此 草草 了 事 区 关 。 合 大 我 们 变换 一 下 版 式 ， 给 目 己 制造 一 些 难度 和 挑战 ， 或 者 新 的 想法 也 便 应 运 
而 生 。 这 块 黄色 的 面 版 ， 在 原来 的 视觉 中 可 能 是 一 个 传统 的 内 容 区域 ， 但 当 它 旋转 之 后 ， 也 许 便 跳出 了 原 有 的 概念 ， 新 
的 设计 思路 则 可 能 由 此 开局 。 





传统 版 式 旋转 版 式 
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二 、 设 计 分 解 
旋转 版 式 ”STEP 


当 我 们 抛弃 了 传统 的 版 式 ， 那 个 黄色 的 面 版 
也 许 不 再 是 一 个 只 用 来 承载 信息 的 容器 ， 当 我 们 
一 于 擎 握 着 主题 ， 一 于 敞开 着 想像 时 ， 它 或 许 渐 
渐 束 变 成 了 静 桥 难 中 的 那 座 桥 ， 而 俯视 角 的 视 完 
也 非 同 于 传统 的 页 面 。 新 的 创意 区 ® 在 自我 制造 困 
难 的 路 上 诞生 了 。 


主 视觉 设 定 :rr 


根据 大 的 创意 万 向 ,我们 进行 主 视 党 设计 ， 
这 是 一 个 俯视 的 视角 ， 我 们 根据 视角 的 定义 进行 
人 物 的 角度 和 动作 的 设计 ( 由 于 游戏 版 本 内 容 的 
设 定 ， 无 奈 中 只 能 选择 了 游戏 中 的 悟空 与 玉 免 精 
来 扮演 这 对 无 厘 头 的 情侣 角色 )。 并 在 桥 的 两 侧 增 
加 羽毛 的 霹 型 ， 代 表 " 剖 ' 桥 这 一 独特 的 定义 。 


- 


: Relcy|\M 


信息 排 布 ”srEPs 


将 信息 进行 模块 分 布 ， 并 尽量 钳 开 与 主 视 竞 
相 冲 突 的 部 分 ， 比 如 两 个 人 物 与 内 容 版 面相 区 的 
部 分 。 为 了 给 内 容 腾 出 足够 的 空间 ， 我 们 也 需要 
适当 调整 主 视 觉 人 物 的 位 置 ， 在 调整 主 视 涡 人 物 
位 置 的 同时 尽量 保证 人 物 的 四 分 之 三 以 及 内 容 信 
恩人 在 1000 像素 的 最 小 沁 围 之 内 。 


ET 
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三 、 贝 面 展示 


@ 胶 沪 游 幅 ~ 个 QQ 号 硒 一 个 游戏 世界 补 欢 末 到 腾讯 游戏 , 请 马上 和 登录 您 的 游戏 人 生 | 腾讯 消 戏 


关 亚 少 戏 生 霹 记录 出 戏 万 长 1 


DY EE [Lo p> 
图 QQ 号 码 直接 登录 ， 无 需 注册 国立 刻 登 录 点 亮 独 一 无 二 桃子 图 标 


mount clothes 
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速度 、 随 性 、 上 自由， 是 旋转 页 面市 给 我 们 的 视 完 感受 。 


05 车 





坤 大 挪移 





而 当 我 们 旋转 页 面 的 同时 ， 新 的 创意 也 可 能 随 之 产生 。 它 让 我 们 知道 ， 方 块 的 版 面 不 仅仅 是 个 信息 的 容器 ， 只 要 稍 


稍 友 挥 想像 ， 它 也 会 成 为 视 党 和 创意 的 主体 。 
不 妨 一 试 。 
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上 下 格局 、 左 右 格 局 、 混 合格 局 


和 平移 是 在 网 页 规定 的 1000 像素 宽度 内 ， 将 原 有 网 页 信息 内 容 往 左 侧 或 右 侧 
ry 交趾 平行 移动 ， 使 页 面 产生 不 稳定 的 状态 ， 然 后 在 这 种 与 常见 方式 不 同 的 不 平衡 的 布 
》 XS 。 局 中 导 找到 更 新 鲜 的 创意 和 表现 方式 下面 我 们 列举 一 些 平衡 的 方式 和 注意 事项 。 








在 平衡 过 程 中 我 们 也 需 注 意 以 下 几 扎 。 
(1 ) 图 一 :在 1024X768 像素 的 用 尸 显示 器 下 是 看 不 到 平衡 的 效果 的 。 


(2 ) 图 二 :创意 不 同 当 然 选择 也 不 同 ， 图 二 的 平移 法 形成 三 段 画幅 ， 块 面 较 小 ， 冲击 力 也 相对 不 足 。 当 然 规 炬 是 
活 的 ， 设 计 中 也 可 以 依 创意 选择 。 


(3 ) 图 三 : 建议 使 用 的 平衡 方式 。 不 论 哪 种 显示 器 用 户 都 可 以 看 到 平移 的 效果 ， 画 面 整 体 ， 冲 击 力 强 。 





图 一 : Xx 图 二 : XY 图 三 : V 
( 1) 图 一 : 上 下 格局 ,SLOGEN 和 主 视觉 都 在 首 屏 。 


(2 ) 图 二 : 左右 格局 ,SLOGEN 和 主 视觉 在 左 侧 ， 使 用 这 种 万 式 的 时 候 尽量 让 SLOGAN 的 重点 部 分 保证 在 首 屏 高 
度 以 内 。 


( 3 ) 图 三 : 混合 格局 ， 内 容 和 SLOGEN、 主 视觉 各 占 一 席 风 水 宝地 。 


。 / 
oon 





图 一 : 上 下 格局 图 二 : 左右 格局 图 三 : 混合 格局 
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圭 气 侧 漏 同样 精彩 


【 问 蒜 】 





非常 规 主 视 党 位 置 的 设 定 ， 也 给 了 创意 新 的 表现 空间 ,结合 布局 的 优势 新 的 
网 页 视觉 形式 感应 运 而 生 ， 圭 气 侧 漏 也 能 有 同样 的 精彩 。 
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这 是 平移 个 页 面 ， 
它 利用 了 平移 后 的 视觉 关系 创造 出 新 的 空间 感 
受 。 以 石 块 为 主要 质感 的 景 主要 承载 信息 内 容 ， 
以 场景 为 主 的 背景 主要 配合 人 物 表现 。 这 种 方 
式 在 普通 的 上 下 版 块 关系 的 页 面 中 比较 常见 ， 
但 是 应 用 在 左右 格局 的 平移 页 面 中 ， 就 显得 比 
较 出 彩 。 人 物 与 场景 与 石 面 版 的 前 后 关系 也 处 
理 得 不 错 ( 除了 石 块 的 投影 减弱 了 空间 外 ) 
算是 一 个 比较 惊艳 的 创意 表现 。 











平移 的 方式 改变 了 我 们 日 常 的 视觉 习惯 


也 给 创意 市 来 了 新 的 空间 和 挑战 。 


左右 格局 


个 万 圣 节 派对 邀请 页 面 ， 不 对 称 的 
格局 让 页 面 有 更 强 的 层次 感 和 形式 感 。 左 侧 高 
了 , 也 增强 了 些许 万 圣 节 的 神秘 
感 。 如 果 利 用 这 种 层次 关系 设计 出 典藏 之 类 的 
概念 可 能 会 更 贴近 主题 。 


这 是 一 
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NJOY Wmv ssl alicSa ouee obray no>esss ov a 


可 ) HH 
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| | 
el yy 


YY YB NPC 
PCHA|: 





这 个 页 面 将 LOGO 和 SLOGAN 放 到 左 侧 ， 并 保证 了 主 SLOGAN 信息 和 LOGO 以 及 人 物 的 头 部 在 
首 屏 以 内 。 平 移 产 生 的 前 后 空间 设计 ， 使 画面 动静 结合 。 前 景 是 安静 的 信息 ,而 缠 藏 其 后 的 是 战国 的 
烽火 连天 。 





98 


05 东 坤 大 挪移 





三 、 混 合格 局 


弛 Gametree AY os Ze 我 束 SO 2 | 寺 W7e) 
| 





EVENT0Z 


EVENT03 





应 用 不 对 称 格局 进行 按钮 和 内 容 的 互动 ， 形 式 和 功能 一 体 化 。 


WE'RE HIRING 


t's play time. Teknision helps 
launch the PlayBook'™ 





除去 背景 ， 叱 无 非 丈 是 一 个 排版 清晰 的 页 面 ， 但 平移 后 交互 层级 更 加 清晰 。 
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QQ 西游 天 机 专题 


下 面 我 们 尝试 将 一 个 普通 的 页 面 进行 平移 ， 看 看 能 够 产生 怎样 的 效果 ， 注意 
平移 背景 前 后 色调 的 选择 并 在 平移 之 后 进行 细 化 让 其 更 加 贴 合 主题 .生动 有 趣 。 





世 QQ 西游 装机 专题 
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这 是 QQ 西 游 的 网 吧 妆 机 专题 ， 收 到 需求 后 ， 我 们 通过 简单 的 排版 完成 了 页 面 。 画 面 除 了 简洁 也 没有 其 他 的 特点 ， 
气氛 不 足 也 无 任何 的 亮点 ， 时 间 紧 迫 、 创 意 枯 将 ， 我 们 要 如 何 拯救 。 
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为 了 寻找 一 些 不 一 样 的 视 沉 效果， 我 们 用 了 通用 性 的 平移 万 式 ， 下 面 我 们 来 看 看 ， 它 是 售 能 够 为 我 们 市 来 一 些 不 同 
的 表现 并 留意 在 这 个 过 程 中 间 的 万 法 和 注意 事项 。 





平移 背景 ” STEP 











将 背景 平移 ， 设 定 前 景 和 背景 的 颜色 ， 
为 页 面 的 交互 需求 的 主 SLOGAN 是 "火爆 装机 ”， 
可 以 选择 对 比 色 来 增强 视觉 冲击 力 ， 让 专题 的 
整体 调 性 更 加 鲜亮 一 些 。 在 平移 时 可 以 选择 移 
全 800 像素 宽度 的 边 绿 ， 这样 1024 像素 的 用 
户 也 可 以 看 到 平移 效果 。 


实物 化 设 定 S'EP2 


通过 颜色 的 设 定 ， 我 们 可 以 将 其 场景 化 ， 
Eee ES 让 画面 更 加 生动 ， 这 里 我 们 选择 了 桌面 的 木板 

wf , 质感 做 为 黄色 的 实物 设 定 ， 紫 色 的 内 容 界面 则 
通过 卷 角 设 定 为 一 张 纸 质 的 海报 。 


细 化 STEP 3 


当 实 物化 设 定 完成 后 ,我 们 就 可 以 对 其 进 
行 细 化 ， 由 于 是 装机 主题 ， 我 们 将 键盘 鼠标 、 
游戏 道具 还 有 奖励 一 起 放 上 桌面 ,让 人 感受 到 
装机 后 可 以 直接 体验 游戏 的 感受 。 然 后 大 体 细 
化 一 下 光影 让 它 在 视觉 显得 更 加 整体 。 这 样 就 
基本 上 完成 了 。 
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训 游 戏 y 





通过 平移 ， 我 们 为 一 个 普通 的 页 面 添加 了 小 小 的 精彩 ， 平 移 的 效果 让 整体 画面 更 加 跳跃 透气 。 
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汇 志 有 版 三 


经 验 是 把 双 刃 剑 ， 它 帮助 我 们 更 高 效 快捷 地 完成 任务 ， 但 它 也 往往 是 束缚 我 们 思维 的 相 锁 。 网 页 设 
计 也 是 如 此 ， 由 于 早期 硬件 市 范 等 限制 ， 网 页 设计 开始 有 了 目 己 的 制作 规范 ,但 随 着 网 络 的 友 展 ， 网 页 
技术 也 在 不 断 变 化 和 提升 ， 网 页 展示 的 万 式 也 更 加 丰富 了 起 来 ， 仪 仪 是 翻阅 网 页 设计 作品 进行 学 习 是 远 
远 不 够 的 ， 那 只 会 让 我 们 在 视觉 的 道路 越 走 越 窒 ， 也 许 我 们 可 以 兰 试 的 跳 入 其 他 设计 体系 ， 让 不 一 样 的 
环境 刺激 我 们 新 的 灵感 。 同 杂志 版 式 学 习 ， 是 我 们 尝试 迈 出 思维 局 限 的 第 一 步 。 





| () O 
消除 平面 设计 边界 ， 向 杂志 版 式 学 习 
想 想 
| () 质感 超 轻薄 、 版 式 强 节奏 、 图 片 大 视觉 
简约 却 有 力 的 强 视 觉 
1 2 网 做 做 
剑 灵 灵 值 中 心 欢 迎 页 


形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





消除 平面 设计 边界 ， 向 杂志 版 式 学 习 


这 是 一 个 通过 借鉴 杂志 版 式 设计 来 优化 网 页 设计 形式 感 的 一 种 灵感 刺激 方 
法 ， 由 于 杂志 设计 有 着 比较 深厚 的 平面 设计 历史 ， 而 今天 硬件 和 网 络 条 件 也 有 了 
一 定 的 改善 ， 网 页 设计 环境 日 趋 自 由 ， 增 强 网 页 设计 的 形式 美感 成 为 许多 网 页 设 


计 师 的 着 力 点 ， 下 面 我 们 就 来 看 看 杂志 的 版 式 设计 ， 也 许 能 激发 我 们 一 点 小 小 的 
灵感 。 











假如 它们 是 网 页 


为 什么 可 以 向 杂志 学 习 


首先 因为 纸 质 媒体 的 平面 设计 和 信息 排版 较 网 络 媒体 有 着 更 悠久 的 历史 ， 相 对 而 言 它们 的 经 验 沉淀 更 加 专业 ; 其 次 ， 
随 着 网 络 硬件 的 提升 ， 网 页 在 视觉 形式 表现 上 的 束缚 也 越 来 越 少 ， 这 样 的 环境 给 网 页 设计 师 带 来 了 更 多 元 化 的 设计 学 习 
空间 ， 而 杂志 排版 无 疑 是 其 中 一 位 良 师 ; 第 三 ， 杂 志 版 式 中 简约 轻 浒 的 形式 感 正好 契合 了 现在 配合 多 终端 的 网 页 自 适应 
设计 。 


所 以 同 杂 志 排 版 学 习 ， 是 网 页 探寻 新 形式 的 一 个 开始 。 
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质感 超 轻 薄 、 版 式 强 节奏 、 图 片 大 视 完 


如 果 要 系统 地 同 杂 志 排 版 学 习 可 能 一 篇 小 文章 是 很 难道 尽 的 ， 如 果 从 形式 感 
上 进行 研究 ， 杂 忘 设计 中 的 轻 质 感 的 色彩 结构 搭配 、 强 节奏 的 版 式 、 整 设计 的 信 
恩 图 形 化 以 及 超大 视 完 的 开阔 的 高 质量 图 片 都 是 一 些 简单 但 快速 有 效 的 学 习 点 。 
当然 这 一 切 都 事 出 有 因 ， 它 们 不 仅 仪 是 一 种 形式 。 








在 聊 起 " 轻 注 "这 个 话题 前 ， 我 们 先 简 单 了 解 一 下 网 页 UI 的 友 展 ， 并 说 说 为 
们 和 今天 的 网 页 可 以 轻薄 并 且 成 为 一 种 趋势 在 网 络 刚 进入 人 们 的 生活 时 ， 大 
家 并 不 太 理 解 这 种 新 的 传媒 和 交互 形式 ， 所 以 设计 师 们 必需 通过 拟 物 的 UI 指导 
人 们 进行 操作 ， 而 今天 网 络 和 网 页 交互 的 使 用 已 经 普及 ， 用 户 已 经 基本 了 解 了 
大 部 分 的 交互 形式 ， 这 时 候 设 计 师 可 以 不 必 大 费 周章 的 去 做 拟 物 的 UI 或 水 晶 效 
果 ， 并 把 重心 转 同 信息 梳理 上 来 ， 轻 注 的 UI 残 在 这 时 应 运 而 生 了 ， 另 外 轻 湾 的 
UI 可 以 更 好 地 把 握 色 彩 和 结构 ， 让 视 党 更 加 轻 县 、 明 快 、 响 亮 。 





志 中 强烈 的 版 式 证 奏 除 了 大 小 块 面 组 成 的 平面 结构 外 ， 另 外 一 个 节奏 感 
is 文字 的 排版 上 。 粗 磅 与 细 磅 、 大 字号 与 小 字号 的 视觉 对 比 配 以 明暗 的 
色彩 表现 ， 阅 读 层次 分 明 、 视 竞 节 奏 感 也 较 强 。 这 也 是 受用 户 十 几 年 的 网 络 使 
用 经 验 影 响 的 伴随 着 互联 网 的 信息 增加 平 铺 所 有 内 容 不 再 是 一 种 适合 的 行为 ， 
如 何 更 好 地 收纳 并 引导 用 户 行为 ， 人 在 有 限 的 空间 里 明确 重点 ， 强 节奏 的 排版 会 
市 用 户 一 步 一 步 更 舒适 地 阅读 信息 。 





漂亮 的 视 宫 图片 成 为 翻阅 杂志 的 一 大 乐趣 ,高 质量 的 、 高 精度 的 图 片 在 传 
递 信息 的 同时 ， 也 给 我 们 市 来 了 视觉 上 的 享受 。 超 大 的 图 片 容 易 快 速 抓 住人 们 
的 眼球 ， 形 成 强大 的 视觉 冲击 力 。 当 然 这 个 时 候 图 片 的 质量 也 起 到 全 关 重 要 的 
作用 。 网 页 上 能 够 使 用 高 精 硫 的 大 图 ， 这 一 点 应 该 归功 于 市 宽 的 友 展 ， 昌 然 中 
国 在 这 方面 的 友 展 不 及 一 些 友 达 国 家 ， 但 图 片 大 视 党 做 为 未 来 的 一 种 趋势 是 姓 
庸 置 疑 的 。 
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杂志 版 式 主要 通过 色 块 和 点 、 线 、 面 的 配合 形成 形式 美感 。 
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在 一 些 时 尚 或 视 竞 类 的 杂志 中 ， 圆 形 、 三 角 、 和 斜 线 、 一 
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呈现 强烈 的 视觉 效果 。 轻 质感 减少 了 许多 具体 质感 和 细节 的 
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remain unawarc of oer 
aging socictyand the 
changes required in 
healthcare, and many 
are also interested to 

hear how caredroids 
lcarntodcalwith : 
difficult concepts Suc h 


as cn ytions and cthics 





< ems. But whats 
next? How to proceed? 
What does the worid 

need? Researchers unitel! 





THE POWER + 
OF BEING 一 
IN-BETWEEN With Product 
EVERYTHING Serviee Systems, 
protwwtypes Gn 
Adesignerfriend de 


worksat the British 
National Health 
Service as acoachol 
mnovation tcams. 
She told me once that 
sheollen gets asked 
the qucstic 


EDONTYOU 
ES 
县 CHAIRS 


ANYMORE? 


points, the intermal 
ucture of organi 
sations, the valbe 


ctv md 











109 


形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





二 、 版 式 强 亡 奏 


版 式 的 强 节奏 设计 ， 是 在 一 个 画面 中 强调 和 突出 重点 信息 ,并 有 明确 的 引导 指示 。 它 不 同 于 过 去 平 铺 式 展示 信息 的 
交 旦 万 式 ， 它 强调 信息 层级 和 视觉 流程 ， 较 之 杂志 版 式 设计 而 言 ， 虽然 网 页 设计 有 目 己 特殊 的 交互 性 ， 可 以 更 有 好 辑 地 
收纳 信息 ， 但 由 于 设计 习惯 受到 早年 市 苑 、 栅 格 化 、 延 展 性 等 问题 的 限制 ， 在 形式 感 的 表现 上 上 略 显 拘束 。 在 一 些 杂 志 ( 特 
别 是 设计 和 时 尚 类 的 杂志 ) ， 大 胆 的 版 式 布局 是 值得 我 们 借 答 的。 倘若 网 页 设计 能 从 杂 忘 版式 设计 中 得 到 学 习 ， 并 结合 
目 己 的 交互 的 特殊 优势 相信 会 有 比较 不 错 的 表现 。 





从 视觉 上 讲 ， 如 何 去 强 化 信息 以 达到 突出 和 明确 视觉 指引 的 目的 呢 ? 我们 用 三 个 天 键 词 来 概括 它 “大 小 ”多少 、" 粗 
细 "。 下 面 我 们 分 别 来 看 一 看 。 





首先 是 大 和 小 的 节奏 配合 。 硅 张 的 大 字 和 小 字 的 配合 使 用 是 杂志 化 版 式 节 奏 的 一 大 特点 ， 它 使 阅读 和 视觉 的 定位 更 
加 明确 ， 适 用 于 我 们 这 样 快速 阅读 的 信息 时 代 。 


其 次 是 多 和 少 的 节奏 配合 。 大 量 的 留 日 在 设计 杂志 中 也 是 常见 的 ， 留 日 增强 了 信息 的 层次 感 ， 也 让 阅读 得 到 休息。 


第 三 是 粗 和 细 的 配合 。 粗 细 的 配合 一 个 是 体现 在 高 磅 数 和 低 磅 数字 体 的 配合 上 ， 还 有 体现 在 留 日 处 的 细微 设计 中 。 





| 本 中 MIKE MEIRE COLOPHON DISTRIBUTION 
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06 杂志 版式 





三 、 图 片 大 视 萝 


在 这 个 读 图 时 代 ， 长 篇 的 文字 让 和 人 厌倦， 图片 是 直接 有 效 地 触动 我 们 厅 木 神经 的 好 办 法 。 








超大 的 图 片 是 杂志 设计 中 音 见 的 表现 万 式 ， 由 于 市 宽 的 限制 ， 过 去 的 大 部 分 页 面 设 计 都 选 反 音色 、 渐 变 、 平 铺 等 万 
式 做 为 页 面 的 背景 , 随 着 硬件 的 友 展 和 技术 的 优化 ,未 来 我 们 也 更 有 条 件 使 用 更 大 面积 的 图 片 ,进行 更 大 面积 的 形式 设计 。 

















图 片 大 视觉 分 为 三 个 类 型 ， 一 是 作为 背景 使 用 的 ， 材 盖 整 个 版 面 的 背景 大 图 ， 它 多 由 高 质量 的 摄影 、 插 画 或 一 些 艺 
术 平面 作品 组 成 ， 图 片 的 质量 决定 了 版 式 的 质量 ; 第 二 种 是 信息 的 图 形 化 ， 它 将 信息 进行 整体 的 图 形 化 设计 ， 让 文字 信 
息 形成 连贯 而 整体 的 图 片 视觉 ; 第 三 种 是 文字 配 图 ， 它 通常 与 文字 并 行 展示 出 多 样 的 形式 表现 。 


1. 背 景 





Interviews 





Wil 





形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 


2. 信 息 图 形 化 大 图 


由 文字 和 人 物 组 成 的 插画 式 的 图 形 化 信息 呈 
现 ， 让 阅读 犹如 电影 般 播放 ， 视 觉 表 现 十 分 整体 。 





由 网 四 -页 内 由 网 四 机 内 不 同 的 鸟 类 形态 通过 等 比 线 让 对 比 感受 更 直观 。 
sp BR RN ME pA 
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3. 文 字 配 图 





GANGSTA FOLK 


oo 








BURLESQUE PERFORMER., SELF-MEDICATOR, 
NEW YORK CITY, 2010 ROHNERT PARK, CALIF, 


大 图 片 、 大 标题 、 小 文字 这 三 种 元 素 组 成 了 许多 精彩 的 、 具 有 强烈 节奏 的 视觉 
表现 ， 当 然 其 中 文字 配 图 的 图 片 质量 占有 关键 地 位 。 
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纸 感 + 


简约 却 有 力 的 强 视觉 


这 是 一 个 多 元 化 的 时 代 ， 许 多 领域 之 间 的 界限 也 越 来 越 模糊 ， 硬 件 技术 和 程 
序 开 友 的 友 展 为 设计 开 屏 了 更 广 冰 的 道路 ， 这 时 设计 的 同 源 同 示 则 表现 得 更 加 明 
显 ， 也 让 我 们 看 到 了 许多 如 同 杂 志 化 排版 的 时 尚 简约 的 网 页 设计 ， 它 们 可 能 并 不 
完全 从 网 页 设计 中 解放 ,但 里 面 的 几 个 处 理 绝妙 的 小 点 给 我 们 展示 了 未 来 的 趋势 ， 
根据 其 各 目的 小 特点 ， 将 其 归纳 如 下 。 














如 这 是 一 个 全 屏 画 幅 页 面 。 简 洁 的 方形 版 块 完 满 了 
现代 感 。 大 块 面 的 轮 播 图片 与 反日 背景 的 万 形 关 | 为 、 前 、 
后 按钮 形成 了 强 节 奏 ， 下面 小 字 的 栏目 配 上 大 视觉 的 
简洁 块 面 让 整体 视觉 元 满 了 强烈 的 现代 感 。 

ONE WARM WINTER ， 


JACKEN FUR OBDACHLOSE IN BERLIN 


AHNLICHE 3 
ARBEITEN ew 


全 版块 中 并 无 太 多 的 质感 表现 ， 色 彩 和 板块 结构 的 配合 表现 决定 了 画面 的 大 视 苋 ， 三 角 块 面 与 对 比 色 的 配合 应 用 让 画 
面 锐 利 、 活 路 、 啊 亮 ， 充 满 了 现代 的 时 尚 气息 。 文 字 、 小 三 角 、 一 个 像素 的 细 线 及 微 折 纸 的 质感 表现 决定 了 细节 。 轻 质 





感 无 需 考 虑 太 多 实体 逻辑 的 束缚 ， 可 以 充分 友 挥 色彩 和 结构 的 优势 ， 这 种 万 式 使 我 们 可 以 在 更 短 时 间 内 实现 细节 和 大 视 
元 兼备 的 、 具 有 视 帝 ;中 击 力 的 网 页 效果 。 
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轻薄 的 监 条 矢 面 与 日 色 背 景 相 间 颜色 清新 分 明 ， 
笠 线 的 结构 充满 了 时 尚 的 动感 ， 文 字 节 奏 感 展 好 ， 动 
态 交 互 的 可 操控 性 强 。 


I~I~I~l 
人 





JOBS FOR 
NEW GRADUATES 


NHNM4D075>K 





一 





这 是 一 个 游戏 资料 页 ,轻薄 的 质感 在 科技 化 的 战 
fi ru 导 争 主题 中 如 鱼 得 水 ， 应 用 得 恰到好处 ， 虽 然 UI 质感 
i 8 轻薄 ， 但 游戏 性 却 极 强 。 烘 托 大 气氛 的 背景 和 精致 前 
ess CoN Er =| 景 的 3D 人 物 给 我 们 带 来 了 高 质量 的 视觉 享受 。 整 体 
游戏 气氛 浓郁 ， 设 计 手 法 也 不 落 俗套 。 








叫 虱 9| 叶 纠 ! 名 
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州 当 710| 三 
着 号 LIE| 


Cc} 是 对 三 
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形式 感 + 一 一 网 页 视觉 设计 创意 拓展 与 快速 表现 





版 式 强 节奏 


LOGOUT 


PROBLEMATIKA ，STARSI IN OTROCI ，ODRASLI 


ODVISNOST 
NIIC 4A 


ea ~ no 
去 -本 上 a 











ea Vollkoé se ee Postani simpatizer pole in akaiwnestl 2 OR 
anikom in mobilnimi napravami ter v 0seb i a wi ee 这 和 和 sod bniml iehn logllami Re Si arti Danaie a dieta amo zanimt 
O CENTRU KAKO DO NAS SPREMLJAJ NAS PODPORNIKI 
国 
kk 
加 





超大 字号 主 标 题 是 杂志 








个 特征 ， 配 以 小 池 这 明 ， 残 可 以 形成 强 节 奏 的 形式 感 。 


KRISTALIA。 


Salone del Mobile di Milano 17/22 April 2012 
Hall 16 Stand D43 





大 图 与 小 字 的 配合 也 是 杂志 化 版 式 的 单 用 手段 ， 也 是 强 节 奏 形 式 的 好 办 法 。 
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Bleed Is a 
multidisciplinary 
design consultancy 
based In Oslo 

and Vienna. 


EUROPEAN 
DESICN 
LEADER 


ll £ Beed Os%0 
| { wg 人 Nedresate 5. 0553 Osb, Norway 
10 +47 493 06 000 / bieed@ owed com 


从 )S W 
、 A {0 Beed Venns 
Dap_Bauer-Gasse 24/27, 1069 Vierna Austre 
名 sees_onen 国 hoere Bos +43 430 8040 从 11beedGenea com 


除了 鲜明 的 大 字 表 现 外 ， 纯 文字 和 手写 体 的 配合 ， 大 气 中 市 亲 和 。 右 下 角 的 一 块 小 面积 小 字 ， 定 位 了 画幅 的 最 
小 精度 ， 使 整体 大 视 党 不 致 于 显得 简陋 。 





二 


估 会 堂 O) / ee 
S - -一 
> 辐 于 灾 各 站 
SANKAIDO ids (Db heng 
忆 加 2 号 
忆 一 -二 en 
CONCEPT OD 一 ， 一 - ee 二 O 
pa 一 . 多] 已 | 
WORK OO Ee bp pe 三 
>， 2 器 族 fo 
STAFF Po : ~ p 人 ' 
= 信 3. E s 
二 人 六 -一 © 人 “5 组 > 
一 之 | je 下 注 = DY 
OMPANY 攻关 S py 本 法 二 区 
~ ee 全 我 Dt 
NTACT < 心 Dw 胡 风 
上 部 我 本 A 友 家 和 
人 下 办 水 物 大 才 pA 龙 计 
4 人 全 本 集 : 
PRNACY POUCY 思 白 后 生 包 国 » 思 
a W 为 之 去 网 堪 3” 
a 多 7 $ 过 机 上 上 所 
1 上 2 
7 多 蝇 这 
汉 家 江 上 
3 打 上 
s 总 
及 放 
"uD 
他 
上 





这 是 一 个 竖 条 的 导航 ,形式 大 胆 点 击 当 前 按钮 有 具体 的 图 片 显示 , 深 色 的 图 片 内 容 一 方面 可 以 对 菜单 进行 图 解 ， 
男 一 万 面 在 白色 育 景 上 深 色 彩 图 形成 了 色彩 上 明 与 瞳 的 厄 奏 感 ,天 键 子 母 的 大 与 小 子 说 明 也 形成 了 大 与 小 的 节奏 感 。 
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形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





三 、 图 片 大 视觉 
作为 以 图 片 为 主 的 大 视觉 ， 图 片 本 身 的 质量 也 是 相当 关键 的 ， 它 承担 着 整个 大 效果 。 


1. 背 景 大 图 


DB zou0rnrt no-rycom? 





dom.praat.paginafan 


UE 
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se 


eq 
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移 轴 的 照片 是 近 两 年 
比较 流行 的 高 空 售 提 的 形 
式 ， 它 让 城市 看 起 来 如 玩 
有 具 一 般 轻 松 有 却 ， 图 片 视 
况 上 占有 一 定 优势 并 配 以 
Q 版 的 气泡 按钮 ， 风 格 整 
体 ， 视 觉 统一 开阔 。 


看 到 高 空 单 杆 泰然 自 
若 的 一 排 人 ， 不 禁 为 之 提 
一 把 汗 。 单 就 图 片 来 说 ， 
符合 大 背景 的 惊艳 标准 。 
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A Eu ene aboutme portfolio projects blog contactme 


Follow AdhamOannawoy 


designer 


ning webstes 
s and logos as 
well as graphics and print media 





Getin touch with mel Featured here and there: 
| Si 
Emal Twitter Lnkedin rs 国 荔 阳 冉 丰 团 KK 四 天 


LA 国 本 请 and everywhere >» 


my resume 


艺术 化 的 彩绘 人 物 让 整体 视 沉 独特 响亮 ， 有 眼神 与 按钮 的 配合 增强 了 交互 的 趣味 性 。 


SHOWREEL AAA AR 区 


画 CONTACT 国 BLOG 




















高 质量 黑白 图 片 配 上 玫 红 色 方 向 导航 按钮 ， 展 开 的 双喜 配合 交互 指示 着 下 一 级 的 万 向 ， 简 约 、 大 气 、 问 骚 。 
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网 页 视觉 设计 创意 拓展 与 快速 表现 


2. 信 息 图 形 化 大 图 


言 轧 图 形 化 大 图 是 将 信息 进 


整体 的 图 形 化 表现 ， 使 信 , 


Testing /QA 








全 ”这 是 一 张 简单 的 信息 
每 个 小 版 块 的 信 | 
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色 形 化 页 面 ， 主 要 以 图 标 来 概括 





息 内 容 ， 配 色 明 快 鲜亮 。 


息 易 读 的 同时 ， 视 党 上 也 有 尤 如 插画 一 般 的 表现 。 


起 treehouse 


What do you want 


to learn today? 


Plans & Sign Up 





How it works 


Watch videos and take quizzes 
© 了 FEE 
™ 
ioci 
| GS @ 
Unlock your potential 
9 = 党 | 
What peopl ying © 
司 ] we ewe 
Es 
圆 





会 ”用 树 和 根 的 简洁 形态 做 为 比喻 ， 根 部 单线 曲折 循环 往 
, 很 好 地 图 形 化 了 流程 的 概念 ， 图 标 和 人 色彩 表现 也 比较 


ee 





全 这 个 页 面 的 图 形 化 利用 了 网 页 的 交互 性 ， 将 每 个 实时 
As 多 色 的 圆 框 ， 利 用 点 击 交互 浏览 更 多 





i 


己 / 必 \o 
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3. 文 字 配 图 


文字 与 大 面积 图 片 之 间 的 排版 变化 形成 读 图 为 主 、 文 字 说 明 为 辅 的 、 用 图 片 带动 文字 阅读 的 信息 传递 模式 。 这 种 模 
陈 人 在 信息 爆 友 的 时 代 更 为 大 众 读者 所 接受 。 


4 DIGITAL 
7 “| PRODUCTS 





Ui 图 中 PE 


Lanyrdcom 





ve， auen 加 NE yrioidChimp 
ME 0 shopify heguardian 


fn 


Porentes by Oaaaan. 4 a0r expenence ceogn comstiancy Sted m ergon, UK 


Clearleft 





What's Cooking? 
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剑 灵 灵 值 中 心 欢迎 页 

下 面 我 们 将 一 个 多 文字 的 信息 页 面 尝 试 将 其 杂志 化 版 式 设计 ,在 入 手 之 前 ， 
我 们 需要 对 整体 需求 进行 全 面 了 解 。 杂 志 化 版 式 需 要 我 们 在 形式 感 和 图 形 化 上 进 
行 比较 全 面 的 设计 ， 所 以 咀嚼 需求 里 的 信息 内 容 有 助 于 我 们 更 好 地 整体 把 握 和 改 
造 页 面 。 有 一 句 话说 得 好 ， 如 果 你 拍 得 不 够 好 , 是 因为 你 靠 得 不 够 近 。 下 面 我 们 
就 来 看 看 。 








芭 3 咽 剑 灵 灵 值 中 心 欢迎 页 
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一 、 需 求 分 析 


这 是 一 个 灵 值 系统 的 欢迎 页 ， 需 求 万 希望 用 户 能 够 通过 四 个 要 点 的 介绍 进一步 了 解 灵 值 ， 并 希望 在 信息 阅读 上 更 加 
双 松 ， 视 觉 表 现 更 加 友好 。 由 于 这 是 上 线 前 临时 增加 的 一 个 需求 ， 整 个 制作 时 间 只 有 两 个 小 时 ， 而 内 容 以 文字 为 主 ， 于 
是 当下 我 们 选择 了 类 似 杂 志 排 版 的 视觉 表现 把 以 上 内 容 分 为 五 个 部 分 。 

首页 , 它 负责 整体 介绍 并 设 有 功能 的 快捷 入 口 ， 以 帮助 部 分 希望 快速 进入 的 用 尸 可 以 直接 到 达 系 统 。 其 他 内 容 根据 
标题 分 为 四 个 页 面 ,为 了 更 好 地 进行 杂志 版 式 化 设计 ,我 们 要 提炼 重点 、 杭 理 关 系 。 通 过 强化 文字 的 节奏 形成 设计 形式 感 。 

















具体 操作 如 下 。 
二 、 设 计 分 解 
( 1) 将 内 容 中 提 及 的 常用 操作 功能 提炼 成 交互 按钮 ,让 用 户 在 阅读 信息 的 同时 可 以 操作 。 另 外 帮助 
需要 快速 进入 页 面 的 用 户 以 便捷 通道 。 设 置 的 五 张 页 面 内 容 轮 播 的 导航 ”e0000 ”， 让 用 户 对 后 面 的 信息 量 有 
一 个 预知 。 


DO Wg 入 0 站 欢 i 有 列 蝴 讯 游戏 ， 语 马上 答 录 您 的 游戏 人 生 | 三 讯 汶 戏 


微 博 讨论 进入 灵 值 系统 加 昌 





INTEORAL 


灵 值 中 心 
都 在 这 个 页 面 进行 . 


@OOOO 
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( 2 ) 参考 杂志 版 式 ， 拉 开 文 字 节 奏 。 由 于 素材 提供 时 只 给 了 三 张 配 图 ， 所 以 我 们 将 第 一 部 分 的 内 容 " 什 么 是 灵 值 ' 设 
为 欢迎 页 ,放大 欢迎 二 字 ,一 方面 在 得 时 间 内 弥补 了 紊 材 的 不 足 ， 形式 上 的 友好 性 ; 
并 使 用 英文 进行 一 定 的 闭 饰 和 说 明 。 拉 大 标题 与 正文 字号 徘 距 ， 进 一 步 增加 整体 视 营 节奏 感 。 


品 








(DO Wy 入 3 赵 欢 im 采 到 是 讯 游戏 ， 语 马上 登录 您 的 游戏 人 生 “ 钥 讯 游戏 
.8 数 信号 : LOVEBNS 数 博 讨论 中 
f IS INTEGRAL 





什么 是 灵 值 ? ? 


ERE ln OL3NOD 13jAA 





Wh = 


@OOOO 








(3 ) 其 他 三 个 页 面 都 使 用 了 相近 的 做 法 ， 主 标题 的 放大 以 及 现 文 的 使 用 都 增加 了 视觉 排版 的 节奏 感 ， 序 号 处 的 红色 


块 的 应 用 与 小 字 的 配合 也 使 文字 排版 上 有 轻重 分 明 的 节奏 表现 。 


(全 Wn 入 1 总 欢迎 来 到 因 讯 游戏 ， 请 马上 登录 你 的 游戏 人 生 | 厦 讯 游戏 


.2 微 信号 ; LOVEBNS 
z/ 
> 











HOW TO 


GET 


INTEGRAL 
如 何 获 得 灵 值 ? > 
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Oy me 坊 交 本 天 训 戏 ， 请 马上 要 录 弥 的 游 邓 人 生 | 腻 讯 小 


3 < 这 本 信号 : LOVEBNS 剑 灵 官网 官方 论坛 微 博 讨论 中 








[OL A ta Wa 





NS 

MW USEFUL 
0 SRN 灵 值 有 什么 用 ? 
A (NAA a 9 
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Ep 


时 代 在 变 规则 也 在 变 ， 网 页 设计 师 刚 入 行 的 时 候 都 会 被 告 和 信息 内 容 需 要 授 放 在 800 或 1000 像 
素 的 宽度 以 内 ， 但 是 今天 不 论 在 网 络 速度 还 是 硬件 、 显 示 屏 都 有 了 不 同 程度 的 更 新 。 面 对 伴随 而 来 的 
多 终 闯 显示 ， 如 何 让 我 们 的 网 页 有 一 个 展 好 的 第 一 视觉 ? 如 何 让 各 类 的 用 户 特 别 是 帝 屏 用 户 在 目 己 的 
显示 器 上 看 到 完整 的 视觉 盛宴 ,而 非 仅 停留 于 1000 像 素 宽度 的 切 糕 网 页 ?我们 需要 全 屏 大 视野 。 那么 ， 
全 屏 男 幅 和 目 适应 的 信息 设计 成 为 了 天 键 。 





1 一 
131 
133 
1441 


况 况 


不 做 1000 像素 小 切 糙 ， 还 给 寓 屏 大 视野 


人 VE 


大 图 平 铺 、 中 心 定 位 、 单 侧 定 位 、 全 屏 响 应 


硬件 已 迈步 视觉 怎 可 原 地 漠 留 


做 做 


核心 答 党 员 全 国 招募 


少 


、 剑 灵 汉 化 专题 等 
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不 做 1000 像素 小 切 糕 ， 还 给 宽屏 大 视野 
本 章 介 绍 的 方法 是 通过 全 屏 连贯 的 大 视觉 来 增强 网 页 的 整体 性 和 视觉 震 所 
力 。 因 此 我 们 要 解决 两 个 问题 : 一 个 是 因 全 背景 而 产生 的 信息 干 护 的 问题 ， 另 一 
1 部 : 是 面 对 不 同 显示 器 如 何 进行 全 画幅 自 适应 响应 问题 。 让 用 户 在 不 同 的 使 用 环境 
JAD -aeainasmgstmsk 


~ 
人 















全 屏 不 切 料 


A 对 历 ， 在 我 们 入 行 时 首先 会 被 告知 的 潜 规 则 就 是 ,页面 内 容 一 定 要 设计 在 1000 ( 1000 ~ 
1004 ) 像素 的 宽度 以 内 ， 这 个 规则 并 没有 错误 ， 特 别 是 在 过 去 的 几 年 中 。 不 过 随 着 硬件 和 网 络 的 发 展 ， 网 页 显示 的 终端 
也 在 友 生 着 快速 的 变化 ， 从 宽屏 到 超 宽 屏 ， 从 手机 到 iPAD。 如 果 网 页 设计 固守 着 1000 像素 宽度 的 话 ， 也 就 相当 于 放弃 
其 他 终端 用 户 的 视 完 美感 。 

所 以 多 终端 响应 式 全 屏 设计 成 为 必然 的 趋势 ， 当 然 或 许 这 对 您 并 不 陌生 。 


1920 








切入 


将 视觉 限定 在 中 间 1000 宽 度 的 区 域 
我 们 叫 它 切 糕 区 





如 果 我 们 翻阅 2008 年 之 前 的 页 面 残 会 友 现 过 去 那些 年 网 页 设计 的 特点 。 从 缩 略 图 中 残 可 以 及 现 ， 当 年 的 页 面 通 单 
将 内 容 设置 在 800 或 1000 像素 宽大 以 内 ,背景 则 选择 纯 底 或 渐 要 或 纹理 平 铺 。 而 今天 如 果 用 大 屏 显 示 辟 来 浏览 这 类 页 面 ， 
殊 会 友 现 ， 它 们 如 同一 块 中 央 切 糕 。 当 然 我 们 是 可 以 完整 浏览 页 面 的 全 部 内 容 ， 但 1000 像素 的 设计 在 金 屏 用 户 看 来 却 略 
显 局 促 。 
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本 贡生 六 


EL ORTO) 


TD 


TT] 


那些 年 我 们 做 过 的 切 料 


当然 近 两 年 ， 许 多 网 站 在 头 部 的 视觉 设计 上 也 打通 了 1000 像素 围墙 ， 不 过 大 部 分 内 容 设计 还 是 保留 在 1000 像素 宽 
戎 以内， 穿越 围墙 伍 么 说 也 是 件 冒 险 的 事 : 一 方面 有 技术 的 局 限 性 ， 比 如 不 同 浏览 器 的 兼容 性 ; 另 一 万 面 ， 经 验 轧 成 为 
说 服 目 己 偷懒 的 最 冠 腕 蔚 星 的 理由 。 


全 屏 时 代 


SS 


‘ “9 
~ hl 


A 
: 必 t 
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到 
日 
巴 
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nm 
- Ee 
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苋 屏 的 展示 效果 更 加 开阔 丰满 ， 充分 利用 了 1000 像素 以 外 的 标准 空间 ,你 是 人 否 有 所 心动 ?但 如 果 你 为 用 尸 感 到 不 安 
的 话 ， 我 们 可 以 看 看 下 面 这 个 分 辩 率 比例 图 ， 这 虽然 是 某 款 产品 的 用 户 比 率 ， 但 可 以 看 到 一 些 普 遍 性 的 问题 。 
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屏幕 分 辨 率 





屏 腊 分 状 率 统计 

a 1366x768 
1440x900 
a 1024x768 1440x300 
| 1920x1080 1366x768 
Ml 1680x1050 Em 1920x1080 
a 1280x1024 国 1024x768 
a 1280x800 国 1680x1050 
| 1600x900 | 1280x 1024 
Nl 1152x864 Ll] 1600x900 
a 1280x960 | 1280x800 
万 可 其 地 二 其 他 

2012 年 12 月 2013 年 7 月 


上 图 分 别 是 2012 年 12 月 和 2013 年 7 月 BNS 游戏 用 户 屏 需 分 辨 率 调查 报告 ， 从 上 图 可 以 友 现 ，1024 分 辨 率 用 户 占 
的 比例 嗓 下 滑 的 趋 式 ， 仅 七 个 月 时 间 1024 分 辨 率 从 16% 降 至 了 10%。1366 和 1440 分 辨 率 的 笔记 本 用 户 还 是 占 相 对 多 数 ， 
超大 屏 的 1920 分 辨 率 宽 度 用 户 也 在 逐渐 上 升 。 从 2013 年 7 月 的 数据 来 看 ， 针 对 BNS 游戏 用 户 来 况 ( 由 于 剑 灵 是 高 配置 
游戏 ,所 以 在 同类 产品 中 用 户 的 屏幕 分 辨 率 较 高 ， 不同 产品 有 不 同 分 状 率 数值 比 ， 大 家 可 以 根据 自己 的 用 尸 比例 来 决定 
网 页 的 最 小 宽度 ) ,网 页 设计 师 可 以 将 网 页 的 最 小 沱 围 拓宽 至 1280 分 辨 率 ,让 1280 分 辨 率 以 上 的 用 户 拥有 最 优 预览 效果 ， 
另外 也 保证 1024 分 辨 率 的 用 户 能 够 完整 地 看 完 信息 ( 完整 地 看 完 信 息 包 括 通 过 交互 触 友 或 者 奶 标 的 浴 动 配合 浏览 ， 但 浏 
览 效果 可 能 相对 次 于 1280 分 辨 率 以 上 的 用 户 。 ) 


1024 用 户 1280 以 上 用 户 


10% 90% 


是 时 候 让 屏 堤 超过 1024 分 辨 率 的 用 户 享 受到 更 大 视野 的 设计 了 。 不 论 是 想 让 你 的 产品 信息 看 起 来 更 舒适 ， 还 是 想 让 
你 的 产品 看 起 来 更 上 流 并 贴近 时 代 ， 我 想 你 也 不 忍心 放弃 这 样 的 变 哇 。 


StatCounter Global Stats 
Top 10 Screen Resolutions from March 2009 to March 2012 
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= ey fe Es fe 
大 图 平 铺 、 中 心 定位 、 单 侧 定位 、 全 屏 啊 应 

这 里 向 大 家 推荐 四 种 全 屏 网 页 设计 的 视觉 模式 。 简 单 归 纳 了 电脑 显示 终端 
的 全 屏 设计 ， 展 示 了 1920 最 大 画幅 和 1024 最 小 画幅 的 设计 。 中 间 过 渡 1280、 
1440 等 宽度 可 以 依照 此 方法 以 此 类 推 








一 、 大 图 平 铺 自 适 应 


这 是 一 种 给 用 户 感 党 最 强烈 的 大 背景 全 屏 视 竞 ， 整 个 视 竞 主打 一 张 完 整 图 片 ， 交 互 和 文字 信息 较为 简单 。 图 片 尺 才 
根据 屏 宽大 小 目 适 应 ， 交 互 荣 单 和 文字 信息 通 单 默认 系统 字体 通过 大 小 区 换 和 位 移 进 行 屏 宽 目 适应 。 





SLOGAN SLOGAN 





es dy fe 人 
二 、 中 心 定位 ， 两 侧 自 适应 
将 主要 内 容 和 视觉 居中 安放 在 1000 像素 的 尺寸 以 内 ,左右 两 侧 安放 次 要 的 菜单 按钮 或 辅助 信息 ， 让 它 根据 屏幕 宽度 


自 适 应 ， 这 个 方法 要 注意 : 一 是 不 要 将 核心 内 容 安放 两 侧 ， 以 免 被 忽视 ; 二 是 延展 区 域 尽 量 减少 干扰 或 在 延展 收缩 过 程 
中 产生 信息 重 荀 。 


GCT SROLETAN 
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三 、 单 侧 定位 ， 中 心 延 展 


主要 的 信息 内 容 居 一 侧 对 齐 ( 左 侧 或 右 侧 都 可 以 ， 中 国人 一 般 习 惯 从 左 阅 读 所 以 我 们 通常 选择 左 侧 为 主人 出 ) ， 次 要 
的 辅助 视 完 居 另外 一 侧 。 文 字 信 息 选 择 系 统 默 认 字 体 ， 并 根据 屏幕 目 适 应 ,为 视 腕 内 容留 有 一 定 的 空间 以 达到 浅 饰 效果 。 


SLOGAN Bs SLOGAN 衣 二 = 





四 、 小 切 糕 全 屏 响应 式 


小 切 粹 啊 应 行业 俗称 瀑布 流 设 计 ， 是 根据 屏幕 宪 度 进行 计算 ， 通 常 在 设计 时 会 有 一 个 基础 最 小 切 粹 ， 然 后 以 2 倍 、3 
信 、4 信 的 万 式 进行 拓展 ， 并 计算 出 最 合适 完整 的 组 合 。 通 常用 在 图 片 信 息 的 展示 页 面 。 


1000 像素 以 外 是 更 上 流 的 空间 ,不 要 在 过 去 的 潜 规 则 中 无 法 自拔， 不 要 让 经 验 画 地 为 牢 ， 大胆 开垦 新 良田 吧 ! 


SLOGAN 尝 盖 一 一 SLOGAN 鞋 二 ~- 
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硬件 已 迈 


我 们 将 其 





五 步 视 党 怎 可 原 地 闹 留 


分 为 四 大 类 进行 赏析 ,包括 :大 图 平 铺 目 适应 、 中 心 定 位 两 侧目 适应 、 


里 侧 定 位 中 心 延展 、 小 切 糕 全 屏 目 适应 。 





大 图 平 铺 自 适 应 


对 于 大 图 平 铺 目 适应 ,图 片 质 量 是 关键 ， 
已 将 影响 着 整体 的 视 况 质量。 其 次 ， 是 内 容 
与 图 片 的 协调 ,尽量 让 它们 不 会 了 互相 干扰 ， 
处 理 方式 一 般 分 为 两 个 类 型 ; 一 个 是 对 背景 
的 处 理 ， 一 个 是 对 文字 的 处 理 。 背 景 万 面 ， 
会 配合 文字 所 人 处 的 位 置 进行 局 部 模糊 、 弘 理 
色彩 弱化 、 单 色 化 等 处 理 。 文 字 万 面 有 时 会 

选择 履 乍 搬 色 ， 或 半 透 明 底 色 等 方式 进行 突 
出 ， 拉 开 与 背景 的 视 沉 差距 。 


> ”图 片 质量 高 ， 文 字 选 择 随 字形 的 方形 块 
面 填充 突出 信息 ,表现 干脆 利落 。 图 片 尺寸 
随 背景 大 小 目 适应 ,文字 使 用 系统 默认 字体 。 
在 目 适 应 的 过 程 中 便于 定位 和 程序 操控 。 


ME 人 





全 ” 半 透 明 的 文字 背景 使 内 容 在 复杂 的 背景 上 变 得 





LE Pg 


Market Menu - Two Courses £16.95 includes 
Canapes and Home-Made Breads 


Sunday Lunch - Three Courses £16.95 
includes Home-Made Breads 


Friday Night Offer - Three Courses £21.95 
includes Canapes and Home-Made Breads 





导 清晰 ， 并 与 玻璃 质感 背景 相得益彰。 
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形式 感 + 一 一 网 页 视觉 设计 创意 拓展 与 快速 表现 


SHOWREEL p ey NH 


CONTACT 人 @ BLOG 











下 图 的 三 张 网 页 是 上 图 左 中 右 三 个 按钮 的 相应 页 面 。 这 是 一 个 超 屏 的 背景 视觉 ， 也 束 是 大 于 1920 分 辨 紊 显示器 的 背 
景 视 范 。 它 通过 手 锅 的 征 伸 趋势 与 交互 按钮 进行 配合 ,内容 呈 现 巧 妙 利 用 了 简化 质感 的 黑色 T 恬 ， 信息 清晰 ,背景 简洁 
并 过 渡 了 衣服 的 形态 。 双 辟 延 展 所 呈现 的 信息 也 以 简洁 的 黑色 块 承载 ， 双 手 捧 起 的 造形 ， 计 简化 的 版 块 与 实际 动作 结合 
在 了 一 起 。 磊 大 的 背景 人 像 ， 给 我 们 市 来 了 强烈 的 直观 感受 ， 黑 日 虚实 的 结合 巧妙 目 然 ， 黑 日 男性 人 物 与 出 跳 的 玖 红 亮 
色 | 问 胎 时 尚 。 
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07 全 屏 大 视野 


二 、 中 心 定 位 ， 两 侧 自 适应 


中 心 定位 是 一 种 假 全 屏 的 视 沉 效果， 适合 于 文字 信息 较 少 的 视 营 选 型 页 ,而 这 部 分 的 视觉 并 不 使 用 全 画幅 的 照 厂 或 
插画 ， 而 是 通过 一 定 的 排 到 组 合 形成 的 主 视 党 。 主 画面 集中 在 1000 像素 以 内 ， 左 右 市 一 定 的 延展 性 。 整 体 不 切 料 ,形成 
视 况 上 的 假 全 屏 。 上 下 信息 主要 以 导航 、LOGO 等 内 容 为 主 。 通 过 欣赏 下 面 几 张 网 页 ,我们 看 看 有 什么 讨 15 的 办 法 实现 
假 全 屏 的 视 竞 效果 。 








Urban Mood 3 加 SoaALMEDAoN 回 Inseson NEewson | df) 回 


2 How happy is Germany? 


Contribute to Germany 5 
good mood with the hashtag 
4#Stimmungsbild 


MOOD TODAY 


pay 





Tatefomian 


这 个 页 面 监 色 的 大 背景 与 林 色 的 小 扎 缀 搭配 ， 色彩 鲜 丽 。 中 心 向 四 周 的 太阳 型 视 完 ， 使 我 们 感受 到 了 视觉 的 延伸 。 
这 是 一 种 讨 5 的 假 全 屏 方法 ， 上 下 两 侧 的 信息 是 按 最 大 画幅 定位 的 ， 整 体 页面 开 阔 ， 目 适应 舒展 性 自然 。 





SPECIFICATIONS GALLERY 


天 > 


Bb F 了 
ROOMINESS 了 9 DYNAMIC STYLE 


MORE 


ECO TECHNDLOGY 


DuUmIN FRONT WHEN IT COMES TO THE ENVIRONMENT 
jiesel with 6-5pet | 





各 VIEW ALL 





两 侧 的 切换 按钮 是 让 中 心 视 党 延伸 为 假 全 屏 的 好 办 法 。 
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形式 感 + 区 页 视觉 设计 创意 拓展 与 快速 表现 


PARTICIPANTS WHO DIDNT FIMISH HIGH 
ON Mt | SCHOOL 
Ti 


LIFE ISN'T EASY PARTICIPANTS WITH UNIVERSITY 


462 |279 |183 3 YD mcm 


PARTICPANTS HOYUSED UNMOUSED 


Coverine everything from bug bites te welding 
te drug use, Dr. Plante counsels participanmts PARTICIPANTS WITH GRADUATE 
with 3 mixture of tough lOve and compassion DEGREES 

NMONTREAL HAS AN ELABORATE NETWORK OF in this glimpse of her at Work 


ORGANIZATIONS FOR THE HOMELESS. AND THE 

CUENTELE IS MASSIVE - 28,000 BY SOME 

COUNTS, SHOE-HORNING A NEW APPROACH LIKE .06t 

HOUSING FIRST INTO SUCH A WELL-ESTABLISHED 

CONTEXT IS ey AT HOMEIS TRYING TO \ PANTICIPANTS WG WORE GI USED 
WHEN THE STUDY BEGAN 

COORDINATE WITH BOTH PUBLIC SERVICE - 

PROVIDERS AMD MGOS TO HELP THE CTTYS 0 9 "jo: 

MENTALLY ILL GET OFF THE STREETS. 





左 侧 的 彩色 LOGO 定位 也 是 能 够 快速 让 用 户 感 受到 | 人 


C3 wiweet OVNIT OFRCOAL GITE OWATON TRALER QLEOAL 





给 边框 文字 信息 穿 上 单 色 窍 形 束 身 衣 来 帮助 我 们 实现 假 全 屏 ， 它 还 可 以 使 文字 免 受 育 景 干 扰 ， 也 万 便 程 序 
上 上 的 目 适应 定位 。 
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三 、 单 侧 定 位 ， 中 心 延 展 


00I0 sw 
ONE WARM WINTERIX < > 
pe 


mY > 


ONE WARM W 


JACKEN FUR OBDACHLOSE IN BERLIN 


AHNLICHE 
ARBEITEN 


IMPRESSUM KONTAKT HRSS mH TELEN 


(Ge 
En 


ATO0H 则 
- 


0I9 居 下 型 


#1FololA 


7 AL 
Hx As ra r 4 
ASS 人 2 
el oatole , Sk 
: y > 
刚直 C} 旦 包 人 引 到 : /6 于 
大 \ » 
i N D> WK 1 
-一 San 3 
| [BAY EI 


7 92) 
EE 


dsjpzdise 风 | 
对 Ql 开创 川 型 


本 小 虽 呈 0 三 





Hancame 


Fab 
州 当 7H01 三 
天 号 LIE| 


Cl 是 对 三 





BG 日 侧 定位 ， 适 合 于 资料 较 多 的 全 屏 页 。 在 





单 侧 定 位 的 1000 像素 壳 度 内 首先 要 保证 文字 信 
息 的 呈现 ， 其 次 是 配合 视觉 图 片 。 视 党 图 可 以 
使 用 延展 型 ， 可 以 保证 整个 画面 不 切 糕 。 

左 对 齐 的 设计 如 杂志 一 般 具 有 节奏 感 ， 轮 
播 位 置 撑 开 了 最 大 画幅 ， 并 动 过 同 右 的 轮 播 滚 


动 条 浏 兄 超 过 当前 显示 器 帝 度 的 信息 。 








我 们 可 以 看 到 在 单 侧 定位 的 全 屏 设计 中 ， 
内 容 信息 永远 是 需要 首先 保证 在 最 小 画幅 内 呈 
现 的 ,图片 和 背景 只 是 以 辅助 的 形式 以 目 适 应 
的 方式 存在 。 
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网 页 视 





7 
CS [2 hed sal 
过 险 三 | 有、 a | 


| 答 下 让 汪 如 外 


08 02 UPDATE 


SEASON 3 


为 了 让 前 景 信 息 更 清晰 ， 背 景 时 单 退 而 求 其 次 ， 采 用 模糊 或 单 色 弱化 。 





07 全 屏 大 视野 





四 、 小 切 粒 全屏 响应 式 


率 


MARKENFIUN CROSSING INFECTED 





I 异 啊 应 式 设 计 适 合 以 小 图 片 展 示 为 主 的 信息 或 图 文 
言 息 。 信 息 之 间 的 天 系 属于 并 列 的 、 信 息 量 级 接近 的 ， 信 息 数 量 
较 多 的 ， 小 切 糕 的 万 式 可 以 支持 实时 更 新 的 动态 数据 。 切 糙 图 片 
的 大 小 有 其 规律 ， 它 们 通常 有 一 个 蛙 位 面积 ， 并 以 通常 一 信 、 两 
倍 、 四 倍 这 样 的 翻 倍 亡 式 进行 拍 展 ， 这 样 在 形式 结构 上 可 以 更 加 
完美 无 缺 。 





站 


MARKENFILM CROSSING CINFECTED 











这 里 展示 耽 屏 和 窄 屏 页 面 的 不 同 呈现 效果 。 万 块 较 完 美 地 由 上 人 至 下 填 满 画面 空间 。 
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Wy CAMERON 


网 页 视觉 设计 创意 拓展 与 ' 


NEW WINS 


比例 不 同 的 切 糙 正如 不 同 款 式 的 衣服 ， 


GOLLEETIONS = 2662© 299 lI409 499 


决 速 表现 


wy 
WANT 


WORKO™ 


a 


rte (oa 


FIX BROKEN NEETINGS WITH BETTER 
INWTES OFTEN AN IMPORTANT 
INGRED ENT IS MISSNG. 
ENGACENENT, HTTP J/OW LY/WRHT 


了 \ 上 和 
| | 为 i ph 


i 4 ra 
shortfilimfestiy al 





加 齐 
汪 LL 仁 


让 我 们 在 上 传 图 片 时 有 更 多 的 选择 ， 整 体 样式 也 显得 更 加 动态 


4 松 。 








例 
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这 个 规则 型 的 小 切 料 结构 严谨 ， 形式 上 





4 有松 。 大 家 可 以 根据 信息 的 需要 选择 使 用 。 


仿生 : 士 
[ 司 ) 百 ， 


延展 性 好 。 但 唯一 的 缺点 融 是 对 图 片 比例 尺寸 的 要 求 不 如 其 他 几 个 守 





sé rh 音信 全 & 日 
核心 葡 赏 员 全 国 招募 令 、 剑 灵 汉 化 专题 等 

我 们 分 别 尝试 以 视觉 为 主 和 以 信息 为 主 两 种 全 屏 模 式 的 网 页 设计 ， 也 是 较为 
常用 的 两 种 全 屏 设 计 方 式 ， 当 然 并 不 是 所 有 的 需求 都 满足 全 屏 设 计 的 要 求 ， 所 以 
在 开始 前 我 们 必须 和 需求 方 进行 沟通 ， 对 整体 交互 进行 一 些 改造 以 帮助 我 们 更 加 





顺利 地 完成 全 屏 的 效果 。 





核心 鉴赏 员 全 国 招募 令 
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形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





一 、 需 求 分 析 


这 是 一 个 问卷 调查 专题 页 面 ,由 九 道 问题 组 成 ,由 于 在 产品 处 于 初期 的 少量 放 号 测试 期 ,产品 整体 的 宣传 偏向 视觉 化 ， 
问卷 调查 的 整体 题 量 也 比较 小 ， 这 样 的 需求 给 予 了 设计 师 比较 大 的 空间 : 一 来 可 以 对 问题 进行 图 形 化 表达 ; 二 来 剑 灵 的 
游戏 对 机 器 的 高 配 要 求 让 网 页 设计 可 以 进行 许多 更 宽屏 的 视 竞 表现 。 


在 这 种 情况 下 ， 我们 选择 了 "中心 定 位 ， 两 侧 自 适应 ”全屏 视 党 表现 。 
二 、 设 计 分 解 


1. 交 互 修整 


首先 我 们 将 主 SLOGAN 和 每 屏 重 复出 现 的 长 篇 文字 整体 规划 到 独立 的 首页 ， 这 样 可 以 让 玩家 在 回答 问卷 时 尽量 少 受 
干扰 ， 也 可 以 让 画面 更 加 简洁 。 


(全 腾 汛 游 幅 一 个 QQ 号 硒 一 个 游戏 世界 着 欢 来 到 脂 讯 游戏， 请 马上 登录 您 的 游戏 人 生 | 腾讯 游戏 


"NE 00 Ct 关爱 济 戏 生 霹 , 记录 导 戏 质 长 人 


腾讯 游 履 ® EncsorT 





第 二 ， 设 计 一 条 问题 导航 ， 让 玩家 对 整体 的 题 量 有 一 个 预 估 。 这 样 不 容易 因为 害怕 题 量 太 多 而 中 途 放 弃 ， 用 户 也 可 
以 通过 题目 导航 快速 切换 题目 。 





加. g 四 . 四 . 中. [ol58 [oloE 加 . 四. [BE: 
你 曾经 玩 过 嘟 类 游戏 ? 你 最 常 玩 的 是 哪 类 游戏 [ 近 一 个 月 部 你 的 性 别 ? 你 的 年 龄 段 ? 你 的 职业 ? 你 的 网 游 年 巩 ? 你 每 日 在 线 时 长 ? 你 所 在 的 区 域 ? 你 的 电脑 配置 
GENRE USED TO PLAY GENDER AGE OCCUPATIONAL ONLINE AGE DAILY ONLINE YOUR AREA COMPUTER CONFIGURATION 


第 三 ， 人 在 顶部 设置 弟 规 外 链 和 用 户 登 录 及 用 户 信 息 。 除 了 功能 上 的 用 处 还 能 够 为 假 全 屏 视 竞 提供 一 些 定 位 的 视 竞 点 。 
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07 全 屏 大 视野 





2. 中 心 视 党 定位 


中 心 视 竞 以 问卷 信息 为 主 ， 视 竞 集 中 于 1000 像素 营 度 以 内 ， 标题 由 色 块 背景 和 系统 文字 组 成 ， 可 以 由 程序 控制 定位 。 
在 1000 像素 以 内 中 心 视 苋 的 顶部 保留 出 与 左右 按钮 高 度 一 致 的 空间 ， 主 要 是 为 了 保证 在 目 适应 过 程 中 不 会 重 严 干扰 。 





' Ry 
《 We es 
a 及 六 六 对 ~ 关于 坟 戏 生 运 记 巡 游戏 质 长 Hi 圳 欢迎 来 到 腾讯 游戏 ,请 马上 


1000 


珀 要 Sn 


ol 中， [ola 0 or 
你 最 常 玩 的 是 哪 类 游戏 [ 近 一 个 月 7 的 1 ? 你 的 职业 ? 你 每 日 在 线 时 长 ? 
USED TO PLAY GENDER AGE DAILY ONLINE 


OCCUPATIONAL 


© 赠 沁 游 x 4 ncsoFT 





3. 全 屏 自 适应 设置 


页 面 的 全 屏 效 果 主 要 由 四 个 部 分 承担 : 一 是 问卷 导航 ， 它 突破 了 1000 像素 的 宽度 ， 小 屏 用 户 使 用 时 选择 当前 定位 ， 
这 样 在 满足 大 屏 用 户 视觉 效果 的 同时 也 能 满足 小 屏 用 户 的 功能 使 用 ; 第 二 个 全 屏 适 应 的 效果 是 页 面 顶 部 的 交互 按钮 
根据 屏幕 的 宽度 始终 保持 在 页 面 的 两 侧 ; 第 三 ， 是 页 面 的 背景 ， 页 面 中 部 有 一 段 可 重复 延展 的 渐变 区 域 ， 可 以 根据 屏 宽 
自 适 应 。 


1920 和 1024 像素 视觉 效果 展示 效果 如 下 : 


[3 中 EC 四 Ee 加 CE 并 加 
件 服 全 岂 交 页 哇 关 种 届 对 一 个 用 广 由 四 HH pa 俐 2 是 你 年 申 妨 fi 长 2 A TR WE 体 莉 红 It 吨 先 汝 式 ? 多 素 攻 ML 时 三 间 测 机 过 一 个 月 廊 MY dL 从 的 职业 





| 1920 | 1024 
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岗 党 设计 创意 折 展 与 快速 表现 


DM 


从 
《 
~ 天 时 测 好 至 感 纪 撕 基 扩 质 并 们 





起 欢迎 来 到 条 讯 游 观 , 请 马上 








=- 一 ~ = = 一 一 - 
[on 0B. 四 . gg. 
你 曾经 玩 志 哪 类 游戏 ? 你 最 常 玩 的 是 哪 类 游戏 l 近 一 个 月 你 的 性 别 ? 你 的 年 版 投 ? 
GENRB USED TO PLAY GENDER AGE 


好 "= 


本 Qs mm = mm Sm = = 
06. 06. Da. [olsh [ol 

你 的 职业 ? 你 的 网 游 年 龄 ? 你 每 日 在 线 时 长 ? 你 所 在 的 区 域 ? 你 的 电脑 2 置 ? 
OCCUPATIONAL ONLINE AGE DAILY ONLINE YOUR AREA COMFUTER CONFIGURATION 





全 腾 沁 游 内 


GAVE GIOCON ~ 关于 而 三 宇 感 忆 灵 大 过 后 攻 人 








= 二 
oe. ols 

你 曾经 玩 过 哪 类 游戏 ? 你 最 常 玩 的 是 哪 类 游戏 [ 近 一 个 月 用 你 的 性 别 ? 你 的 年 龄 投 ? 

GENRE USED TOPLAY GENDER AGE 


让 欢迎 来 到 肛 讯 游戏 , 请 马上 着 讯 游戏 





-= 四 
ol ol [om| DB. 5. 

你 的 职业 ? 你 的 网 游 年 龄 ? 你 每 日 在 线 时 长 ? 你 所 在 的 区 域 ? 你 的 电脑 配置 ? 
OCCUPATIONAL ONLINE AGE DAILY ONLINE YOUR AREA COMPUTER CONFIGURATION 





全 | 脂 沪 游 几 


GAM CO COM HG EINE CRIARKN 


09. 


机 欢迎 末 到 胜 讯 游 观 ,请 马上 年 讯 游戏 


9 6G. 


ae 一 一 一 一 


FEYEARS 


车 2 


= = = 
0D. [ol26 [03 [ol 
你 曾经 玩 i 志 只 游戏 ? 你 最 常 玩 的 是 哪 燃 游戏 [ 近 一 个 月 你 的 性 别 ? 你 的 年 龄 段 ? 
GE USEDTOPLAY GENDER AGE 


€ Mt rr" 





Io 虽 . 
你 每 日 在 线 时 长 ? 你 的 电脑 双 置 ? 


DAILY ONLINE YOUR AREA COMPUTER CONFIGURATION 


09 @B. 
你 的 职业 ? 你 的 网 游 年 只? 


OCCUPATIONAL ONLINE AGE 
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Ob HCD KEN REKEIH 区 欢迎 未 到 是 讯 游 观 ,请 马上 


1-2 小 时 a : 4-8 小 时 8 小 时 以 上 


1-2HOUR 48 HOUR MORE THAN § HOURS 





[ss ee es = = 一 一 = 一 一 一 
[oi ge. 四 胃 . 虽 D8. 咯 . [01s [ol98 

你 曾经 玩 过 哪 类 游戏 ? 你 最 常 玩 的 是 哪 类 游戏 (这 一 个 月 有 你 的 性 别 ? 你 的 年 龄 投 2 你 的 职业 ? 你 的 网 游 年 龄 9 你 每 日 在 线 时 长 ? 你 所 在 的 区 域 ? 你 的 电脑 配置 ? 

GENRE USED TO PLAY GENDER AGE OCCUPATIONAL ONLINE AGE DAILY ONLINE YOUR AREA COMPUTER CONFIGURATION 


多" 





人 腾 瀛 游 比 


从 
《 二 欢迎 来 列 晨 讯 游戏 ， 请 马上 讯 游 戏 
GA 的 cow 2 基站 大石 至 司 记 并 洒 台 屈 基 (i 友 区 上 项 讯 六 戏 


ER 


RTHEAST 





mw - — 一 一 一 一 一 -一 -一 = = a = OOO 一 
[ol 虽 . ol3 四. 8 06. 加. OB. 0. 

你 曾经 玩 过 哪 类 游戏 ? 你 最 常 玩 的 是 哪 类 游戏 ( 近 一 个 月 六 你 的 性 别 ? 你 的 年 零 段 ? 你 的 职业 ? 你 的 网 游 年 龄 9 你 每 日 在 线 时 长 ? 你 所 在 的 区 域 ? 你 的 电脑 配置 ? 

CENRE USED TO PLAY GENDER AGE OCCUPATIONAL ONLINE AGE DAILY ONLINE YOUR AREA COMPUTER CONFIGURATION 





全 胶 汛 游 用 


GAVE GOCON 关 直 新 站 全 到 纪 旭 源 对 所 区 人 | 


起 欢迎 末 到 腾讯 游 观 , 请 马上 箱 讯 游戏 


ET 


人 价 3000-5000 人 民 , 币 








wm = = 一 一 =- = 一 -一 
Loli gm 0 目 . 0B. 5 0g. [ol OB- D9. 

你 曾经 玩 过 哪 类 游戏 ? 你 最 常 于 的 是 哪 类 游戏 ( 近 一 个 月 及 你 的 性 别 ? 你 的 年 龄 下 3 你 的 职业 ? 你 的 网 游 年 龄 ? 你 每 日 在 线 时 长 ? 你 所 在 的 区 域 ? 你 的 电脑 到 置 

GENRE USED TO PLAY GENDER AGE OCCUPATIONAL ONLINE AGE DAILY ONLINE YOUR AREA COMPUTER CONFIGURATION 
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设计 创意 拓展 与 快速 表现 


剑 灵 汉 化 专题 


来 ， 和 剑 灵 汉化 人 员 战 个 痛 


活动 规则 


1. ”您 可 以 通过 文字 说 明和 视频 来 了 解 目 前 《 剑 灵 


飞龙 在 天 


对 浮 空 目标 造成 伤害 


点 击 查看 视频 


对 浮 空 目标 造成 伤害 
点 击 查 看 视频 


对 浮 空 目标 造成 伤害 
点 击 查看 视频 


对 浮 空 目标 造成 伤害 
点 击 查看 视频 


》 的 武功 招式 ( 部 分 没有 配套 视频 ) 


2. ”如 果 您 对 目前 的 武功 名 称 不 满意 ， 请 点 击 武功 


图 标 右 侧 的 按钮 


3.， ”输入 您 觉得 更 加 优秀 的 名 词 和 自己 的 真实 姓名 


后 点 击 提交 ， 和 汉化 人 员 战 个 痛 ! 


对 浮 空 目 标 造成 伤害 


点 击 查 看 视频 


对 浮 空 目标 造成 伤害 
点 击 查 看 视频 


对 浮 空 目标 造成 伤害 
点 击 查看 视频 


对 浮 空 目标 造成 伤害 


点 击 查看 视频 


对 浮 空 目标 造成 伤害 
点 击 查看 视频 


在 将 来 的 游戏 中 收录 玩家 所 制定 的 


成 为 游戏 中 的 NPC 
剑 灵 绝版 金 享 泰 亲笔 签名 画册 ， 共 5 








这 是 一 个 职业 技能 汉化 命名 征集 页 面 ， 拉 能 以 职业 分 为 五 大 类 ， 每 个 职业 有 二 到 三 十 个 左右 的 不 定数 量 的 技能 ， 产 
通过 页 面 一 万 面 能 够 征集 技能 名 子 ， 男 一 万 面 也 可 以 起 到 宣传 产品 职业 和 技能 的 作用 并 让 浏览 者 对 产品 产生 一 定 


从 目前 的 交互 稿 来 看 ,内 容 一 次 呈现 比较 多 ， 层 次 感 会 比较 弱 ， 其 次 ， 如 果 依 现在 的 交互 稿 设计 出 来 的 页 面 ， 玩 家 
看 到 的 多 为 由 技能 图 标 组 成 的 小 豆腐 块 ， 视 党 效果 较 弱 。 为 了 改善 整体 交互 的 层次 感 和 视 嘻 性 。 我 们 做 了 以 下 的 的 交互 
修整 和 优化 。 


二 、 设 计 分 解 


SLOGAN 





1. 五 大 职业 按钮 的 自 适 应 


五 大 职业 按钮 将 人 物 形 像 与 文字 拓 一 侧 对 齐 ， 这 里 选择 了 右 侧 ， 这 样 在 页 面 重 构 的 时 候 可 以 比较 简单 地 选择 回 右 侧 
延展 或 收缩 图 片 进行 定位 ， 在 1000 像素 的 宽度 以 内 ， 我 们 选择 全 少 展示 职业 名 称 和 职业 形象 。 按 照 这 种 方式 ， 左 侧 固 定 
苋 度 为 300 像素 ， 当 屏 宽 为 1920 像素 时 ， 每 个 职业 人 物 的 按钮 芝 度 为 384 像素 ， 当 屏 宽 为 1000 像素 时 ， 每 个 职业 人 物 
的 按钮 宽度 则 减 为 140 像素 ， 以 此 类 推 。 


来 ， 和 剑 灵 汉 化 人 员 | 
© 


战 个 痛 
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2. 技 能 图 标 内 容 的 自 适 应 


近 能 图 标的 目 适 应 是 通过 列 数 来 改变 的 ， 每 个 图 标的 宽度 不 要 ， 通 过 列 数 来 目 适 应 屏 宽 的 大 小 。 当 屏 宽 为 1920 像素 
时 ， 图 标 显 示 为 三 你 ， 寓 度 为 600 像素 ， 当 屏 范 为 1000 像素 时 ， 图标 显示 为 两 列 ， 完 度 为 400 像素 。 设 置 1280 像素 为 
图 标 列 数 的 分 界 点 ， 大 于 1280 像素 设置 三 列 ， 小 于 1280 像素 设置 两 刘 。 设 计 图 如 下 。 





SMA i 


OD Smile 



















1920 1000 | 
三 、 贝 面 展 示 
全 胶 六 六 比 0 袍 欢 ip 采 到 申 计 游戏， 请 马上 LE 


僵 ” 大姐， 欢迎 您 ![ 温 出 ] 


铀 气功 师 
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07 全 屏 大 视野 


的 后 浓 下 Dr 旗 欢 才 不 | 后 讯 于 丙 ， 通 后 条 好 


〇 D “mm 技能 





. 


战 个 痛 填写 您 的 姓名 与 技能 名 称 
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医生 用 j 剑 录 不 删 档 测试 官网 


Gh | Fn fp Ea, 加 Bm | oe#vo iE 志 求 分 析 
2 » m5 
站 EN 






首页 ”新闻 中 心 ”游戏 指南 ”下载 中 心 和 目 助 服务 。 玩家 互动 。 鹏 讯 客服 


这 是 《 剑 灵 》 不 删 档 测 试 的 
官网 交互 稿 ， 人 在 写 这 本 书 的 时 候 
《 剑 灵 》 刚 刚 结束 了 第 三 次 内 测 
并 在 两 个 月 后 迎 来 不 删 档 测试 ， 
整个 官网 首页 和 子 页 的 设计 、 重 
构 、 开 友 以 及 内 容 编辑 上 线 大 概 
是 两 个 月 时 间 ， 这 算是 一 个 相对 
苋 座 的 预 留 时 间 ， 对 于 设计 师 来 
说 殊 有 更 多 的 时 间 来 思考 。 大 家 
都 知道 产品 越 接近 后 期 ， 信 息 资 
料 残 越 多 、 类 型 也 越 多 样 ， 天 系 
到 的 合作 和 利益 也 更 加 复杂 ， 由 
于 信息 的 增多 ， 视 党 表现 的 空间 
变 得 狭小 ， 不 删 档 到 公测 后 的 官 
网 区 别 于 预告 时 期 的 视觉 化 官 
WH， 后 期 的 官网 多 以 资料 梳理 为 
主 。 通 剃 的 官网 格局 如 右 图 一 样 ， 
而 设计 这 样 的 交互 页 面相 对 还 是 
比较 难 突破 的 。 


全 新 职业 灵 剑 土 | 


广告 位 ( 440*295 ) 


产品 广告 (200*70 ) 产品 广告 ( 200*70 ) 产品 广告 ( 200*70 ) 






双方 将 进行 公正 的 对 决 真 至 一 方 全 部 倒 下 , 在 
这 里 你 司 以 与 武林 亮 手 们 切磋 技艺 * 












资 村 :本 | 攻防 | 乏 招 | 泽 空 | 内 容光 良 | 采集 | 时装 | 会员 | TS。 
下: 知 攻 | 深 担 | 火 地 兰 | 起 所 t 





健康 游戏 公告 :抵制 不 良 游戏 拒绝 盗版 游戏 注意 自我 保护 谨防 受骗 上 当 适度 游戏 益 糖 沉迷 游戏 伤 身 合理 安排 时 间 享受 健康 生活 





腾讯 游戏 人 mcsoFT 





如 何在 这 样 一 个 传统 的 瓶 劲 下 找到 一 个 突破 口 ， 并 达到 形式 与 信息 的 完美 结合 呢 ?响应 式 网 页 是 一 种 趋势 ， 在 这 一 
年 里 ， 也 有 许多 优秀 的 啊 应 式 设 计 的 案例 ， 但 面 对 信 息 量 如 此 之 多 、 信 息 类 型 如 此 复杂 的 官网 首页 来 癌 ， 确 实 很 难 找到 
一 个 平衡 点 。 为 了 形式 而 形式 的 设计 肯定 满足 不 了 功能 类 型 的 页 面 。 一 个 以 信息 和 资料 为 主 的 页 面 ， 残 必需 从 根本 出 友 
才能 找到 出 路 ， 于 是 我 们 从 形式 表现 逐渐 转 同 信息 梳理 ， 在 这 里 十 分 感谢 同事 高 立 的 帮助 ， 讨 论 是 能 够 激 友 灵感 和 热情 
的 方式 ， 我 个 人 比较 倾向 于 两 到 三 个 人 的 互动 讨论 。 





[| $ 人 
二 、 设 计 分 解 
官网 做 为 一 个 相对 综合 性 的 网 页 ， 它 的 视 况 和 区 互 设计 关系 到 许多 因素 ， 由 于 本 章 的 主题 是 宽屏 大 视野 ， 所 以 在 这 
容 


个 部 分 我 们 主要 针对 官网 的 啊 应 式 在 视觉 设计 方面 的 解析 ， 关 于 官网 的 视 沉 表现、 交互 杭 理 以 及 内 容 归纳 等 部 分 残 不 在 
此 做 细致 分 析 。 
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根据 官网 信息 内 容 
和 剑 灵 的 视 竞 特点 我 们 
选择 了 届 左 对 齐 、 右 侧 
延展 的 万 式 。 这 样 既 可 
以 万 便 延 展 ， 也 可 以 让 
剑 灵 游戏 引 以 为 标的 人 
物 视 沈 得 到 充分 展示 ， 
增强 游戏 性 。 另 外 首 屏 
的 内 容 也 可 以 大 大 增多 。 
当然 主要 的 难点 也 集中 
在 右 侧 的 响应 式 设 计 . 





2. 售 数 单元 格 框 染 ” “3. 传 统 板块 大 变 身 


(1) 4 倍 单元 格 


由 于 这 两 块 信息 的 重要 性 我 们 将 其 排放 企 右 侧 济 动 版 块 的 黄金 位 置 ， 
也 残 是 左上 位 置 ， 不 论 页 面 如 何 流动 它们 都 稳 居 首 屏 ， 呈 现 一 个 半 固 定 的 
状态 。 






全 部 ”新闻 公告 活动 ”媒体 论坛 + 





新闻]J 担 最 萌 灵 剑 土 好 礼 送 不 停 06728 
【新 闻 ] 做 最 强大 的 你 1-45 装 备 推荐 06728 
【公告 ] 我 与 灵 剑 士 合影 高 激活 码 ! 我 与 灵 剑 士 合影 06728 
【论坛 3 信物 捏 脸 大赛 等 你 拿 06724 
【新 闻 ] 做 最 强大 的 你 1-45 装 备 推荐 我 与 灵 剑 士 合 影 06728 
【公告 ] 我 与 灵 剑 士 合影 高 激活 码 ! 06728 
【论坛 人物 捏 脸 大 赛 8B 等 你 拿 好 礼 送 不 停 06724 


( 2 ) 2 信和 坚 条 单元 格 





这 块 信息 是 原 交 互 稿 中 的 职业 介 
绍 ， 由 于 职业 的 介绍 主要 是 人 物 展示 为 
主 ， 所 以 我 们 选择 了 长 条 形 的 板块 以 满 
足 其 展示 性 的 要 求 。 





大 家 可 以 看 到 这 边 的 交互 和 内 容 都 
有 做 了 比较 大 的 改动 ， 将 职业 和 种 族 进 
行 联合 互动 ， 在 首页 上 删 去 了 具体 职业 
的 合击 部 分 ， 将 其 移 到 子 页 内 。 这 样 的 
调整 使 主要 信息 突出 ， 将 复杂 而 相对 二 
级 的 信息 移 至 内 层级 。 内 容 的 逻辑 上 更 
清晰 ， 视 党 上 也 可 以 得 到 充分 展示 。 
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( 3 ) 2 倍 横 条 单元 格 


道具 的 板块 也 做 了 一 些 交互 的 变动 ,大 家 可 以 参照 原 交 互 进行 对 比 。 服饰 。 ”道具 
这 里 的 变化 主要 综合 考虑 了 游戏 中 的 道具 、 服 饰 、 礼 包 都 是 固定 大 小 的 
万 块 图 标 ,而且 一 次 公开 的 个 数 会 比较 多 ,于 是 我 们 选择 了 长 条 的 格局 ， 4 
并 设置 左右 的 按钮 进行 更 多 的 预 抠 。 





王者 服 沛 王者 服 访 王者 服 肇 王者 服饰 


(4 ) 1 信和 单元 格 


1 信和 单元 格 我 们 选择 了 出 现 频率 最 高 的 活动 广告 ， 以 及 在 资料 中 等 级 相对 次 要 一 些 的 副本 和 壁纸 、 原 男 等 视 党 资源 ， 
1 倍 单 元 格 在 流动 上 更 加 灵活 限制 较 少 ,一 些 资 料 根据 其 重要 程度 将 次 重要 信息 进行 层级 收纳 放置 在 左右 < > 箭头 中 。 


30,.000 








武神 塔 
MUSIN 性 描 计 
TOWER 属性 描述 +# 





会 





( 5 ) 0.5 倍 单 元 格 


0.5 倍 单元 格 在 这 个 案例 中 是 为 了 方便 为 媒体 LOGO 提供 合适 的 排 板 空间 而 另外 设 定 的 ， 虽 然 
它 在 视觉 中 呈现 的 是 一 个 0.5 信 的 状态 ， 但 它 在 流动 过 程 中 间 是 绑 定 状态 ， 也 就 是 两 个 0.5 们 单元 格 。 8 


合 为 一 个 1 倍 单 元 格 进行 流动 。 


4. 信 息 的 类 别 梳理 


由 于 版 块 形式 较为 相近 ， 而 且 官 网 的 内 容 又 相对 丰富 ， 所 以 我 们 对 内 容 进 行 了 两 个 大 的 类 别 划分 ， 主 要 是 活动 和 资 
料 两 个 大 的 类 别 ， 通 过 版 块 颜色 的 设 定 进行 归纳 ， 万 便 玩家 的 快速 浏览。 


(1 ) 资料 型 版 块 

资料 型 版 块 相对 于 活动 来 说 更 新 频率 较 慢 ， 属 于 长 期 
保持 性 信息 ， 所 以 选择 以 日 色 为 主 ,让 其 显得 相对 舒适 。 
职业 、 种 族 、 副 本 、 道 具 等 都 属于 资料 型 信息 ， 所 以 这 里 
做 了 以 曰 辰 为 主 的 设 定 。 


礼包 + 





王者 服 肇 


王者 服 久 


王者 服饰 王者 服饰 


(2 ) 活动 广告 型 版 块 

广告 型 版 块 更 新 频率 较 高 ,而 且 需 要 更 加 突出 和 刺 
激 的 视 党 引起 玩家 注意 ， 起 到 广告 效果 ， 所 以 这 边 选 择 
了 深 色 调子 进行 定义 。 


品牌 站 
剑 灵 STORY 
人 


W30,000 





属性 摘 壕 +# 
会 





通过 颜色 调 性 的 划分 ， 用 户 经 过 一 段 时 间 的 使 用 ， 便 可 和 直接 通过 扫 接 了 解 信息 的 大 体 类 型 ， 也 可 以 在 一 定 程度 上 弥 


补 版 块 在 流动 过 程 中 产生 类 别 跨 越 的 问题 。 
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一 个 QQ 号 硒 一 个 游戏 世界 起 欢 凶 来 到 腾讯 游戏 ， 请 马上 和 登 录 你 的 游戏 人 生 | 腾讯 游戏 


关 亚太 驱 生 二 沁 巡 洁 戏 成 长 小 


首页 新 闻 中 心 游戏 指南 下 载 中 心 自助 服务 玩家 互动 腾讯 客服 


新 版 本 
更 新 


NEW VERSION 





全 部 ”新 闻 公告 活动 ”媒体 论坛 + 






【新 闻 ] 捏 最 萌 灵 剑 士 好 礼 送 不 停 


【新 闻 ] 做 最 强大 的 你 1-45 装 备 推荐 
【公告 ] 我 与 灵 剑 士 合影 高 激 活 码 ! 我 与 灵 剑 士 合影 
【论坛 人物 捏 脸 大 赛 9 
【新 闻 ] 做 最 强大 
【公告 了 













拿 


尔 1-45 装 备 推荐 我 与 灵 剑 士 合影 
活 码 ! 

















而 王者 服饰 王者 服饰 王者 服饰 王者 服饰 


以 条 玩 第 戏 


duowan.com 


W30,000 


an] 我 与 灵 鲍 ! O08/28 坟 电玩 巴士 
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1920 像素 宽度 


一 个 QQ 号 一 个 游戏 世界 坊 欢 ip 来 到 腾讯 游戏 ， 请 马 上 登录 # 


关 玻 测 戏 生涯. 记 芝 斑 对 后 长 册 
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全 部 ”新 闻 公告 ”活动 ”媒体 
【新 闻 ] 捏 最 萌 灵 剑 士 好 礼 送 不 停 


【新 闻 ] 做 最 强大 | 
我 与 灵 剑 士 合影 


与 灵 剑 士 合 景 


王者 服饰 王者 服 肇 
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要 玩 江 戏 


duowan.com 


<* 电玩 巴士 
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子 衣 情 


刚 入 行 的 设计 师 经 弟 抱 外 ， 因 为 文字 太 多 而 影响 了 目 己 的 视 竞 设计， 但 我 们 是 售 想 过 ， 设 计 师 是 
接 将 需求 人 给 予 的 平 白 文字 信息 不 加 归 类 地 直接 再 一 次 丢 给 用 户 ? 美 从 来 不 是 毫 无 理由 的 ， 大 量 文 字 的 不 
美 是 因为 它 无 条 理 的 星 涩 ， 一 个 网 页 信息 由 很 多 不 同 的 内 容 元 素 构成 的 ， 若 其 杂乱 无 章 的 一 并 涌 来 ， 手 无 
足 措 之 后 ， 我 们 定 将 全 线 朋 溃 。 给 文字 一 个 衣 橱 吧 ， 智 慧 的 条 理 一 定 能 使 它 更 加 美丽 。 
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说 说 
文字 也 要 有 个 家 


林 目 林 


/LV 


大 关系 、 分 要 操 、 小 字眼 


在 看 


一 个 萝卜 一 个 坑 


做 做 
仙 魔 对 战 


网 页 视觉 设计 创意 拓展 与 快速 表现 





[| [| 
文字 也 要 有 个 家 

没有 家 的 文字 是 离散 的 ， 它 们 不 仪 逻 辑 性 差 ， 而 且 被 扫描 后 的 可 识别 性 也 不 
高 。 不 要 让 你 的 文字 流离 失 所 ,给 它们 一 个 家 ,你 会 故 现 世界 原来 可 以 更 加 清晰 。 

















a 
, 卫 
3 
. 


AN -x g 
全 ra 内 KR A El 
4 > 
AN 斌 x 
TT /PD ER ER 


yx 
> 7 x 2 
二 yd > 了 
3 下 四 3 > Fax 
~ 3 5 < 
由 一 二 





这 是 一 个 日 单 的 家 用 衣 橱 ， 不 同 的 存储 空间 有 痢 不 同 的 功能 。 如 果 我 们 将 大 量 的 文字 信息 进行 合理 地 归纳 和 整理 ， 
相信 我 们 能 很 快 找到 目 己 想 要 的 东西 。 
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大 关系 、 分 要 点 、 小 字眼 
如 果 我 们 把 一 个 长 篇 幅 的 文字 比 做 我 们 的 衣柜 里 的 衣物 ， 那 么 如 何 提 取 衣 柜 
本 四 衣物 的 个 性 与 共性 以 及 它们 之 间 的 远 辑 天 系 融 是 我 们 收纳 设计 衣柜 的 线索 。 
he 信心 


要 收拾 衣 橱 ， 我 们 融 必 需 先 了 解 衣 橱 里 的 组 成 元 素 ， 这 样 才 好 对 它们 进行 归 类 和 整理 。 


日 常 衣 栖 















i 


“诚信 


要 对 衣 柚 进行 整理 ， 我 们 首先 必须 了 解 它 们 ， 包 括 它们 的 类 别 和 我 们 的 日 常 使 用 习惯 ， 这 样 才能 让 我 们 快速 找到 想 
要 的 东西 ， 使 用 起 来 也 更 顺手 。 如 果 我 们 的 衣物 是 由 内 衣 、 内 裤 、 裙 子 、 裤 子 、 外 套 、 围 巾 、 帽 子 、 手 套 等 组 成 的 ， 那 
么 我 们 长 篇 的 文子 又 由 哪些 基础 的 结构 组 成 呢 ?我 们 是 舍 能 够 通过 特定 的 类 别 把 它们 归纳 起 来 呢 ? 


文子 衣 橱 














内 容 图 示 
关键 字眼 友 写 
提示 说 明 主 标题 重要 数字 
_ 执行 按钮 
小 标题 副标题 


在 一 个 长 篇 文 草 里 ， 我 们 通常 都 可 以 找到 以 上 这 些 内 容 ， 如果 我 们 将 它们 进行 归 类 收拾 ， 让 同等 级 的 信息 拥有 目 己 
规律 ， 浏 吃 文 字 的 人 看 起 来 也 一 定 可 以 少 费 些 气力 。 
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1. 主 标题 

主 标题 是 指 一 篇 文章 的 大 标题 ， 用 来 提出 文章 中 心 或 主 目 ， 文 字体 量 相对 较 少 ， 企 网 页 表现 中 通 单 为 粗 磅 大 字号 ， 
在 整体 的 排版 节奏 中 占据 着 较 强 的 节奏 。 

2. 副标题 

副标题 是 指 用 来 解释 主 标题 的 说 明文 字 ， 跟 在 主 标题 后 ,文字 数量 相对 主 标题 更 多 一 点 ， 设 计 表 现 为 字号 中 等 、 磅 
数 中 等 。 

3. 小 标题 

小 标题 通常 指 的 是 在 具体 内 容 中 ， 对 详细 内 容 进行 分 类 组 织 ， 使 行文 条 理 清晰 ， 在 长 篇 文字 中 我 们 也 可 以 对 它 进行 
分 类 和 逻辑 梳理 ， 在 设计 上 ， 也 可 以 通过 特殊 的 形式 表现 进行 定位 。 小 标题 的 表现 通 剃 弱 于 主 副标题 。 

4. 序号 

有 顺序 的 号 码 ， 如 数字 序号 1、2、3、4.…， 包括 大 写 汉字 ， 如一、 二 、 三 、 四 .….…。 

在 设计 中 ， 由 于 序号 有 着 归 类 指引 的 特殊 功能 ， 所 以 在 设计 中 通常 是 一 个 小 亮 尽 ， 它 的 汉 饰 作用 如 同一 个 小 图 标 ， 
对 整体 的 文字 信息 可 以 起 到 分 类 、 定 位 、 浅 饰 的 作用 。 如 果 放 大 序号 的 字号 ， 还 可 以 加 强 排版 的 节奏 感 。 

5. 内 容 说 明 

内 容 襄 明 指 的 是 通常 所 说 的 正文 ， 它 包含 了 下 面 要 说 的 这 些 元 素 ， 但 如 果 将 整体 文字 信息 进行 解剖 的 话 ， 也 残 没有 
所 请 的 正文 的 概念 ， 正 文 是 不 同 信息 分 类 的 综合 。 所 以 这 里 将 暂时 无 法 归 类 的 、 文 字体 量 较 多 的 信息 叫 内 容 说 明 ， 它 的 
字号 通常 较 小 ， 字体 设计 简洁 。 

6. 提示 说 明 


这 个 是 在 正文 之 外 的 对 某 个 事件 或 名 词 的 解释 补充 ， 在 设计 中 通常 的 位 置 是 在 说 明文 字 边 上 或 依附 于 说 明 的 事件 或 
名 词 。 有 的 还 备 有 图 文 玫 绘 等 进行 涂饰 ， 或 者 是 一 些 哩 然 没 有 功能 性 却 让 整个 页 面 都 生动 起 来 的 小 补充， 这 也 是 设计 表 
现 中 的 一 个 小 亮 筷 。 


7. 关键 词 


关键 词 通 党 是 指正 文中 出 现 的 重要 数据 、 时 间 、 地 点 、 事 件 、 物件 等 ,设计 中 会 通过 标 红 、 放大、 图 示 等 方式 进行 强化 。 
如 果 某 些 关 键 词 的 重要 性 高 ,而 且 在 每 个 分 类 选项 中 都 会 出 现 ， 也 会 对 其 进行 特殊 的 图 形 化 定位 表现 。 


8. 图 示 


图 示 分 为 两 种 : 一 种 是 对 整体 内 容 的 概括 ， 叫 图 标 也 叫 1CO ; 一 种 是 对 单个 物件 名 词 的 图 形 化 表示 ,我 们 称 它 为 图 片 。 
高 品质 的 图 示 对 整体 设计 会 起 到 比较 大 的 帮助 。 另 外 浏览 者 通常 会 对 市 有 图 标 、 图 片 的 信息 特别 关注 。 


9. 按钮 


说 明 页 面 ， 如" 扣 击 查看 详情 '"、' 更 多 "之 类 的 按钮 。 我 们 可 以 根据 不 同 的 按钮 功能 设计 其 扔 放 的 位 置 、 闸 色 、 大 小 等 属性 。 
按钮 的 设置 也 可 以 让 当前 信息 呈现 较 重要 的 部 分 ， 让 信息 呈现 更 好 地 收纳 。 
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以 上 这 些 便 是 我 们 大 篇 幅 文字 内 容 的 组 成 元 素 , 当 我 们 面 对 大 量 的 文字 时 ， 我 们 可 以 通过 以 下 三 个 步 又， 逐步 将 它 
们 一 一 寻找 并 归 类 。 


大 关系 可 以 理解 为 对 文章 的 大 意 进行 第 一 步 分 段 ， 它 是 为 了 缓 
解 大 篇 幅 文字 对 阅读 造成 的 恐惧 ， 从 三 个 步骤 对 比 来 看 ， 大 关系 是 对 
第 一 层 大 逻辑 的 梳理 。 它 不 涉及 标题 、 内 容 或 天 键 词 等 细 分 ， 它 的 任 
务 主要 是 理 清 段落 之 间 的 关系 ， 比如 它们 是 属于 并 列 关系 还 是 流程 关 
系 ， 每 段 文 字 之 间 是 否 有 相同 的 结构 或 相似 的 数据 信息 等 等 。 


在 分 清 大 关系 之 后 ， 我 们 第 一 次 通过 图 形 来 进一步 标识 每 个 段 
沙里 的 结构 ， 提 取 每 个 信息 段 沙里 的 主要 元 素 ， 包 括 标题 、 副 标题 
中 标题 内 容 说 明 等 。 这 样 的 提取 可 以 帮助 用 户 快 速 提 炼 8 沙 大 意 。 
在 分 要 点 的 梳理 过 程 中 ， 我 们 要 注意 分 清 人 不 同 要 点 的 层次 关系 ， 从 大 
的 主 标 题 到 小 的 内 容 说 明 ， 由 重 到 轻 ， 注 意图 形 和 色彩 的 应 用 ， 把 握 

节奏 ， 不 能 混 清 关系。 


小 字眼 ， 也 可 以 叫做 天 键 要 点 ， 主 要 是 由 少量 文字 组 成 的 一 些 
相对 重要 的 信息 ， 比 如 数字 、 时 间 、 地 点 、 奖 励 等 等 。 在 这 个 环节 ， 
我 们 通过 图 形 化 标识 将 这 些 信息 进一步 突出 。 这 些小 字眼 有 些 是 关键 
信息 ， 有 些 是 数据 对 比 类 信息 ， 通 单 我们 会 对 其 标 红 或 安置 在 特殊 的 
位 置 供用 户 进 行 类 比 预 咒 。 有 些 天 键 信息 我 们 会 为 它 进 行 配 图 或 增加 
有 互动 行为 的 按钮 提示 ， 从 而 使 用 户 可 以 更 快 注意 并 获得 这 些 重要 的 
次 各， 
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一 个 萝卜 一 个 声 

下 面 我 们 结合 两 个 案例 来 看 看 韩国 人 是 如 何 实现 让 主 标题 、 副 标题 、 小 标题 、 
序 下 号 、 提 示 说 明 、 关 键 子 上 腿 、 重 要 数字 、 执 行 按 钮 各 丈 其 位 的 ， 让 它们 一 个 萝 
一 个 坑 的 同时 提取 共性 也 表现 个 性 。 赏 析 中 我 们 可 以 友 现 : 信息 层次 明显 比 大 
篇 幅 的 文字 更 容易 阅读 ; 有 图 片 的 奖品 比 纯 文字 的 来 得 吸引 人 ; 有 数据 信息 对 比 
的 文字 比 纯 文字 的 更 直观 。 











ee Nissan 
主 标题 Wish ax Design 昱 本 对 Make ax 
副 标题 寞 oA| 寺 全 对 8 吉州 相 妈 呈 对 才子 二 9 人 2A 9| 人 对 ofo| 大 号 刁 对 里子 村 全 丢 0| 召 对 全 elol 吕 吉 子 避 S.。 


rm 
按钮 Wish 久 a|A 土 ofl7| 一 Design 让 引 帮 车 ofil>1 一 Make 这 2 者 0 本 PP| 一 


7 但 号 号 骆 姑 唱 吕 喇 对 各 于 ?个 对 1 出 字 个 对 2 双 EI YPtaa 
EE tptad a 





， 氏 可 > ?2010.1130 
人 eeIAIA 刘 EE 2010.1130 E33》 325 各 撕 4y 


ES 于 早 个 对 忒 如 10081 到 
他 个 对 理 如 5084 到 


EEE opt ais 


Ri 2XKNHNI 钙 X 月 


小 标题 。 重点 文字 配 图 
在 讨论 这 个 页 面 之 前 趾 们 先 大 致 了 解 一 下 页 面 的 主题 ， 这 个 活动 专题 的 大 意 是 设计 游戏 内 的 衣服 ， 然 后 用 纸 模 把 已 制 
作出 来 ， 所 以 作者 在 这 里 为 这 个 文字 衣 橱 赋予 了 纸 模 的 质感 。 纸 片 、 手 绘 、 铀 笔 、 相 机 、 照 片 这 些 妆 饰 让 这 个 专题 宛 满 了 


浓 浓 的 手工 意味 儿 。 下 面 我 们 来 具体 分 析 一 下 在 这 个 纸 模 UI 的 基础 上 ， 它 们 是 如 何 进行 信息 内 容 的 归纳 和 区 域 划分 的 。 


一 次 分 类 一 一 大 关系 


这 是 一 个 较 简 单 的 衣柜 ， 它 分 为 三 个 任务 ， 分 别 是 策划 、 设 计 、 制 作 。 它 们 属于 
一 种 并 区 的 关系 ， 并 且 每 个 任务 的 结构 是 基本 一 致 的 ， 也 残 是 这 在 后 续 的 设计 中 层次 
的 划分 可 以 使 用 近似 的 布局 和 图 形 化 表现 。 


二 次 分 类 一 一 内 容 语义 
根据 语义 ， 将 每 个 版 块 的 文字 信息 进行 释义 ， 并 梳理 它们 之 间 的 层次 关系 。 首 先 把 主 副标题 、 详 细 内 容 划分 出 来 ， 


然后 是 详细 内 容 中 的 小 标题 ， 外 部 链接 等 。 这 里 每 个 版 块 的 内 容 分 为 上 下 两 块 ， 将 任务 的 梗概 和 执行 按钮 往 上 放 ， 具 体 
的 介绍 细则 和 奖励 往 下 放 。 这 样 万 便 用 户 扫 摘 和 快速 操作 ， 如 果 斋 寿 了 解 更 多 的 用 户 可 以 再 仔细 阅读 下 方 这 明 。 


三 次 分 类 一 一 关键 重点 


第 三 步 是 对 关键 的 信息 进行 标注 ,本 案例 选择 了 对 关键 信息 进行 标 红 ， 在 第 二 部 分 的 设计 中 ， 右 下 角 的 小 手绘 草图 
既 况 明了 设计 的 手绘 任务 又 起 到 了 小 妆 饰 的 作用 。 
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小 有 爱 特殊 信息 具体 说 明 


~ oe TN ti- 一 一 - 助 戌 是 言 ,aas ser 辐 





二 
序号 ! citel 二 oho 芭 人 xlE 97|cHRid- 型 名 如 148 首 一 一 一 特殊 信息 
i 到 只 全 12421ol| 对 hE 于 2| oo| 亚 台 寺 7 Se 外 链 


副标题 


主 标题 337,037,.530a FE 


A oNLIOF7E Otc 
型 针 二 革 玫 8! 只 ae oz 





让 lg d 音 
让 bilg le 恒 


让 
A1 
Li 


112198.107 


匡 寺 Lolplleah 
este RE| on 


一 58575.645 


这 个 页 面 的 大 意 是 通过 不 同 渠道 进行 投票 助威 ， 控 照 投 票数 由 高 到 低 进 行 排名 。 数 据 的 强化 表现 ， 以 及 万 便 用 户 对 
比 浏览 是 这 个 版 块 的 一 大 特点 ， 另 外 它 将 各 类 信息 进行 提取 并 分 类 表现 ， 包 括 排名 、 渠 道 、 投 票数 、 助 威 留言 等 。 工 整 的 、 
有 节奏 的 收 约 让 我 们 对 信息 感受 十 分 和 直观， 通过 大 致 扫 摘 即 可 稳 握 。 下 面 我 们 来 分 解 贯 析 。 


一 次 分 类 一 一 大 关系 


首先 根据 投票 数 分 成 三 个 部 分 ， 这 三 者 虽 是 先后 的 排名 关系 ， 但 它们 的 形式 和 信 
恩 结 构 是 一 致 的 ， 所 以 同样 属于 并 列 的 信息 。 这 是 整体 信息 的 大 天 系 。 这 为 未 来 可 以 
直观 地 通过 扫 摘 对 比 残 能 快速 理解 打下 基础 。 


二 次 分 类 一 一 内 容 语义 
接 下 来 分 解 单个 分 类 的 关系 ,正如 绘画 一 样 层 层 深入 。 这 边 主要 分 为 两 大 块 : 标题 和 具体 内 容 。 左 侧 标题 部 分 由 图 标 、 
主 副标题 、 排 名 序号 组 成 ， 右 侧 具 体内 容 由 投票 方式 、 投 票数 据 等 组 成 。 





三 次 分 类 一 一 关键 重点 


第 三 步 就 是 从 繁杂 的 具体 内 容 中 提炼 关键 数据 、 提 示 旁 日 以 及 说 明 配 图 。 这 段 信息 中 的 提炼 内 容 包 括 渠 道 、 投 票 率 、 
关键 措 数 、 外 链 等 ,这 里 都 为 它们 设置 了 各 目 独立 的 位 置 和 表现 ， es 
在 标题 图 标的 右上 侧 还 加 入 了 有 爱 的 情绪 表达 ， 第 一 名 是 嘿嘿 ”, 第 二 名 是 我 们 再 努 点 力 ”, 第 三 名 是 我 们 还 有 取胜 的 可 能 。 
这 些 非 功能 性 的 "小 有 爱 "让 整个 画面 更 生动 。 
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形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





好 的 收纳 可 以 提取 共性 ， 也 可 以 表现 个 性 


这 是 一 个 每 日 等 到 领 奖 页 面 的 内 容 部 分 ,我 们 可 以 友 现 好 的 文子 衣柜 有 两 个 特点 : 一 是 能 表现 个 性 ,二 是 能 提取 共性 。 


序号 叫 蝶 叫 鱼 车 会 7 检 | 针 品 对 妊 伟 型 志 0M2MIS 


OIME ?| 中: 2012.07.26 ~ 2012.08.15 








mg mg \ 
命 50 一 小 说 明 
E 昌 LIC 
开 
aa 0 
站 叶 到 刘 到 引 a1 717 ERA 
按钮 i 、 要 会 天 人 | 1 革 噶 时 对 秆 30 型 舍 2| 吉 人 妇 始 








主 标题 一 号 中 中 吉 囊 列 到 lot 出 |0|01| 人 | 人 | 噶 让 g 呈 号 ~ 


副标题 一 一 。0| 凯 E 7l2t: 2012.07.26 ~ 2012.08.15 























ES ri 
为 容 一 一 一 一 一 一 一 一 一 一 6 叶 台 名 中 全 呈 各色 呈 对 对 妇 0 旧 民品 对 生 寻 对 示人 上 蕊 嘲 委 吓 借 叫 氏 六 eI&t 010| 屋 蚤 2 呈 司 闪 LIO 按钮 
为 容 (GO 本 we 虽 2| 如 人 # EA a 

® jd 内 容 
DRM 5 对 到 漳 苔 虽 2 对 过 (3020HC 二 夺 到 7 











重要 数字 二 .4.500 弄 30003 天 按钮 


Ho CHAdol EL 巾 or5 人 各 miHML RH 


RH 
故 异 5 是 呈 和 才 科 号 大 吉 蔚 芝 让 革 至 号 三 到 LIC 


号 型 丰 虹 下: 8 噶 20 型 
ue 


Mo os 9 py cts 
New Pd 





MCM 
人 上 及 dHIEA 


@ olusor W Felli 


1. 表 现 个 性 


1 © 加 eee = ea ap 
S (2) 
jeanict SA 
A 


jy 


Ep 
© © i - eer Mo nsker Coble e Produts 
六 | 1 型 早 对 站 30 包 号 ol 对 村 莘 4,500 噶 TI 3,000 避 7 fH7l Es 位 HE 





这 个 "衣柜 "对 不 同 的 奖励 类 型 进行 了 不 同 的 形式 表达 。 不 但 在 不 同类 型 信息 表现 上 不 同 ， 相近 信息 也 有 区别 对 竺 。 
如 这 个 页 面 中 有 三 块 奖励 内 容 。01 部 分 展示 的 是 半 实 物 的 奖励 信息 ,所 以 “ 代 币 "和 "音乐 欣赏 券 " 都 用 了 较 写 实 的 图 形 ; 
02 部 分 相对 来 说 是 虚拟 的 服务 奖励 ， 它 们 是 ”下载 收 听 " 和 "网 上 收听 "两 种 方式 ， 所 以 在 奖励 的 图 标 上 使 用 了 功能 化 的 图 
标 表 现 ， 另 外 由 于 这 两 种 服务 是 音乐 券 的 功能 ， 所 以 设计 上 使 用 了 万 形 的 纸 券 样式 ;第 三 部 分 是 纯 实物 的 奖励 ,设计 上 
使 用 了 圆圈 放 入 真实 的 图 片 。 三 种 不 同 的 奖励 万 式 用 了 三 种 不 同 的 表现 ， 虚 实 、 圆 方 的 形态 搭配 收纳 性 民 好 。 


2. 提 取 共 性 


对 于 关联 信息 和 同属 性 的 信息 ， 好 衣柜 能 够 有 效 地 提取 共性 ， 在 这 个 页 面 里 ， 奖励 的 人 数 用 了 捍 独 的 收纳 ， 不 论 是 哪 
种 类 型 的 信息 ， 只 要 涉及 人 数 ， 都 用 了 相同 的 表现 形式 。 在 每 个 奖励 的 右上 角 都 有 一 个 楼 色 圆 形 区 域 放置 奖励 人 数 全。 良 
好 的 收纳 能 将 信息 中 的 共性 提取 出 来 ， 万 便 浏览 者 能 够 快速 对 比 。 在 共性 的 提取 上 还 表现 为 02 中 的 首 乐 图 标 贺 : 音乐 
下 载 + 音乐 欣赏 、 图 : 音乐 欣赏 ， 这 两 个 图 标 既 提取 了 两 个 奖励 的 共性 ， 又 将 下 载 和 在 线 欣赏 两 种 特性 表达 出 来 。 另 外 
还 有 两 个 奖励 的 史 换 价格 soa EB :oo 这 些 信息 图 形 化 表现 ， 为 信息 的 快速 浏览 提供 了 帮助 。 
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08 文字 衣 橱 





好 的 收纳 ， 文 字 往 往 只 是 图 标的 补充 
好 的 文字 收纳 设计 中 ， 纯 文字 的 信息 永远 只 是 图 示 的 补充 ， 它 们 将 平 铺 直 叙 的 文字 都 转化 成 图 示 、 罗 输 关 系 、 数 字 、 


执行 按钮 和 有 爱 的 小 提示 等 。 


副标题 
主 行 是 国内 | 忆 队 Eee | 了 G2 UI 
小 说 明 一 


小 标题 


图 片 


技能 图 标 内 容 襄 明 


说 明 
序号 


按钮 LE 





这 个 页 面 主 要 介绍 了 "君主 和 "英雄 "这 两 种 等 级 的 职业 ， 并 介绍 了 两 种 不 同 职业 的 不 同 奖励 。 这 个 页 面 的 主要 特点 是 
逻辑 符号 的 运用 和 丰盛 的 奖励 配 图 。 





“+ ' 远 辑 字 符 的 使 用 让 信息 逻辑 结构 一 目 了 然 ， 人 在 基础 逻辑 表达 时 ， 符 号 是 十 分 好 用 的 东西 ， 这 些 符 号 包括 "+ 人 “- 
“x““V “一 等 等 ， 适 当 使 用 可 以 节省 许多 文字 上 的 解释 ， 也 能 使 阅读 更 加 方便 快捷 。 











另外 ， 这 张 页 面 的 关键 信息 和 物品 的 图 标 展示 充分 。 在 用 户 浏 览 过 程 中 ， 数 字 和 图 片 是 最 容易 引起 关注 的 ， 人 在 奖品 
或 天 键 物品 介绍 时 ， 图 片 往往 比 文字 有 效 得 多 。 所 以 在 内 容 细 化 过 程 中 ， 尽 量 将 这 些 物品 文字 转换 成 图 片 。 
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计 创 意 拓展 与 快速 表现 


网 页 视觉 设 


形式 感 + 


好 的 收纳 在 图 标 、 按 钮 、 浏 览 方向 的 指引 上 











[= | 
序号 
主 标题 一 一 en qi 对 
be 开 引 人 E} 人 2 7 下 针对 
内 容 和 | 寺 异 于 /作弄 异 于 (2012.7.14 90:00 0| 伴 到 千 7 国 0 人 办 对 
a 译员 URL 竺 由 EL 
图 标 - 
圣 叫 车 URL, 兰 叫 车 对 5 对 要 训 0 
[至 习 全 型 于 中 个 吾 呈 各 站 全 对 全 全 LIE. 如 盏 习 旬 六 生得 全 如 全 型 妆 箭 夺 用 全 1 
03 olwE 总 HS 
EA 
雪 叫 外 如 从 DHCH 3 轨 0| 公 在 | 妈 如 ! 
图 标 0H0| 贸 加 (Ww 
/ 0 一 | 
不 TI00%AX 吾 和 BB te 人 到 如 天 (308 1 如 BE| 时 








世相 时 o 双 717| ， 


V 
时 
0 外 
na 

n 
pr 

Eo 
a SS 

LE 

E 

上 

E 

Ll 


04 oluls 对 | 守 刚 个 划 4 


小 标题 -Ez 
等 而 0| 贡 三 玉兰 量 革 = Ss 
SE st 相思 3 -Tr 
| 4 SO 人 个 以 全 Li 时 夺 当 于 会 受 电 中 P 可 寺 会 引 寺 4 舍利 寺 他 允 全 LICI 


通 帅 比较 充分 


HH salolzxl tat 











惠子 才 5 惧 芝 划 | 小 标题 
内 容 
5 车 如 地 
于 吕 呈 过 ,型 子 
so| 5 起 ga 
提示 说 明 





和 8 - 图标 


到 于 刘 旦 人 50 全 寻 山 下 


YO WN > 
赋 划 可 对 县 避 理 时 7 > 





按钮 


封 则 工 目 旦 0 天公 口 佐 放 到 晤 万 
0| 避 对 个 蚀 器 ! 


世 芝 和 | 要 哺 博 季 吉 会 


这 是 一 个 邀请 朋友 参加 活动 的 专题 ， 信 息 分 成 四 大 块 : 


类 型 的 信息 。 


第 一 部 分 是 一 个 针对 活动 对 象 的 概述 ， 表 现 相对 简要 。 


第 二 部 分 通过 人 物 形象 和 文字 的 配合 
与 活动 的 流程 "做 了 恰当 地 分 解 和 指引 。 


第 三 部 分 利用 表格 进行 信息 收纳 使 整体 内 容 更 加 工整 ， 收 纳 层 
相关 的 图 片 ， 整 体 结构 清晰 ， 重点 突出 。 


第 四 部 分 主要 介绍 领 奖 方式 。 
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活动 对 象 、 活 动 内 容 、 活 动 奖励 、 


领 奖 方式 。 


区 分 性 地 解释 了 申请 人 和 受 邀 和 两 种 角色 的 参与 方式 ,箭头 的 符号 标识 寻 参 


层次 条 理 清晰 ， 疝 读 性 好 ， 重点 信息 和 奖励 物品 都 配 有 


前 述 四 种 不 同 


好 的 收纳 ， 表 现 上 往往 是 有 爱 、 亲 和 的 


特殊 数字 


| 
由 


小 标题 


全 入 二 ~ 是 本 了 图 上 
子 和 类 区 2 王 时 24 全 » 
闭合 X| 划 鲁 SHI 


i 
中 \ 标 题 


小 副标题 





说 明 按钮 
re 
的 0| 树 州 
@ a 
i ea ese a oc ) 
SS rg 
小 提示 三 0| "学 兴 闭 ” 导 制 天 重仓 HOH 登 钻 时 三 时 UCHc c 


惟 攻 蕴 予 虹 导 了 了 对 LI 不 飞人 六 YA2F 刻 殉 NI 不 晤 人工 出 要..》 
[| 。 


2 3215 人 号 gtelK| 20 SOFS| 


Snu TP 
OH HE 荐 诈 2 


NOD 


21 全 二 如 得 ! 如 直 


MAIIMSII 过 


登 吨 夺 7 上 | 


| 寻 呈 加 I 晤 利 鲁 名 乱 对 代 人 S 忆 20R~ 





到 对 吾 寻 耻 列 叫 


nr: 





| Ell Ed ba ED 

国生 Iz Fd ST CA 公 迪 上台 蜡 了 工 总 庙 LjC 
辆 [33 人 de 到 总 如 xz 要 DHH 忆 填 业 和 e4 ok。 

图 cnzymh 圳 至 圭 ET 三 晶 ， 


08 文字 衣 橱 





这 是 一 个 与 用 户 区 
损 意 见 的 互动 活动 专题 。 
首先 ,在 整体 结构 上 很 
写实 ,信息 结构 明晰 ， 
标题 和 和 序号 的 分 层 鲜 明 ， 
标题 使 用 高 饱和 的 背景 ， 
有 具体 信息 则 使 用 低 饱 合 
的 灰 日 背景 ， 让 浏 响 
很 直观 地 束 可 以 梳理 完 
整体 信息 结构 。 每 个 部 
分 的 信息 殊 像 一 张 可 以 
展开 和 收纳 的 折纸 ， 这 
种 交互 形式 与 内 容 信息 
的 结构 是 契合 的 。 除 了 
信息 展示 清晰 、 结 构 写 
实 外 ， 我 们 也 可 以 看 到 ， 
在 每 个 大 标题 处 都 有 一 
个 真人 的 有 爱 小 插图 ， 
哩 是 无 声 的 静态 阅读 ， 
但 却 给 人 以 生动 的 感受 ， 
融 像 是 一 个 好 调侃 的 主 
持 人 在 陪伴 阅读 一 般 。 
男 外， 对 于 特殊 的 关键 
数字 有 独立 安放 空间 和 
较 醒 目的 视觉 表现 。 整 
体 表现 条 和 有 爱 。 
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形式 感 + 一 一 网 页 视觉 设计 创意 拓展 与 快速 表现 





仙 魔 对 战 

前 面 我 们 看 了 许多 X 国 的 信息 收纳 页 面 ， 下面 我 们 拿 一 段 日常 专题 中 常 出 
现 的 文字 信息 进行 归纳 ， 为 它 设计 一 个 适合 扫描 阅读 的 文字 衣柜 。 主 要 关注 如 何 
为 它 杭 理 逻辑 关系 ， 并 为 不 同 的 信息 设计 不 同形 式 的 空间 . 








医 才 吉 仙 魔 对 战 
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08 文字 衣 橱 





需求 分 析 


我 们 拿 虚 线 框 里 的 这 两 段 文字 举例 ， 


推 无 头绪 的 信息 ， 也 是 一 片 没有 美感 的 视觉 。 


仙 

接任 务 : 

报名 时 间 内 ， 希望 仙 方 获胜 ， 可 在 逗 逗 龙 处 接 取 仙 方 任务 
【端午 赛 龙 * 仙 羽 报名 】 豆 豆 龙 长 安 广场 ( 2528 ，743 ) 
两 个 报名 NPCf 仅 在 14:00--15:00 和 20:00--21:00 出 现 
获得 道具 : 5 个 “ 斗 斗 龙 ”， 和 5 个 “Go Go 龙 ， 

斗 斗 龙 : 可 以 用 来 给 对 方 的 龙 使 用 减速 

GoGo 龙 : 可 以 对 自己 选择 的 龙 使 用 加 束 


通常 策划 只 会 拟定 大 致 的 内 容 需 求 ， 而 设计 师 的 任务 就 是 将 这 样 的 内 容 更 轻松 、 
喂食 一 样 ， 为 了 使 其 能 够 更 快 地 吞 下 和 吸收 食物 ， 妈 妈 通 党 


"大 关系 : 仙 魔 的 对 峙 





可 以 看 到 ， 这 里 


的 信息 多 样 有 复杂， 如果 将 其 直接 拷贝 呈现 给 用 户 ， 不 仪 是 一 


接任 务 : 

报名 时 间 内 ， 希 望 仙 方 获胜 ， 可 在 逗 逗 龙 处 接 取 仙 方 任务 
【端午 赛 龙 * 魔 效 报名 】 斗 斗 龙 长 安 广场 ( 2524 ，743 ) 
两 个 报名 NPC 仅 在 14:00--15:00 和 20:00--21:00 出 现 
获得 道具 : 5 个 “ 斗 斗 龙 ”， 和 5 个 “Go Go 龙 ” 

斗 斗 龙 : 可 以 用 来 给 对 方 的 龙 使 用 减速 

GoGo 龙 : 可 以 对 自己 选择 的 龙 使 用 加 速 


更 舒适 地 传递 给 用 户 。 正 如 给 宝宝 
会 为 他 进行 第 一 道 咀嚼 。 我 们 需要 从 以 下 三 个 万 面 得 出 信息 。 


竟 争 天 系 、 它 们 上 县 有 同类 型 的 属性 说 明 。 


"分 要 点 : 它们 一 共 包含 五 个 信息 一 一 简介 、 坐 标 、 时 间 、 道 具 及 其 属性 。 
”小 字眼 : 坐标 和 一 些 时 间 数 据 会 是 重点 要 提醒 的 内 容 。 


设计 分 解 
1. 大 关系 


(1 ) 版 块 间 关系 : 仙 魔 的 对 峙 关系 明确 ， 应 用 "VS3' 表 示 其 对 战 的 关系 。 


(2 ) 版 块 内 主 次 天 系 : 将 版 块 分 为 概述 和 具体 参 


仙 


TASK1 
端午 赛 龙 * 仙 羽 报名 
希望 仙 方 获胜 ， 可 在 逗 逗 龙 处 接 取 仙 方 任务 


时 间 和 地 点 

NPC 仅 在 14:00--15:00 和 20:00--21:00 出 现 
斗 斗 龙 长 安 三 场 ( 2528 ，743 ) 

道具 和 效能 

斗 斗 龙 x2 : 可 以 用 来 给 对 方 的 龙 使 用 减速 
GOGO 龙 x5 : 可 以 用 来 给 自己 的 龙 使 用 减速 





数 两 部 分 


, 并 对 参数 进行 向 化 合并 。 


VS 


压 


TASK2 
端午 赛 龙 * 魔 煞 报 名 
视 望 魔方 获胜 ， 可 在 逗 逗 龙 处 接 取 仙 方 任务 


时 间 和 地 点 
NPC 公 在 14:00--15:00 和 20:00--21:00 出 现 
斗 斗 龙 长 安 广场 ( 2528，743 ) 

道具 和 效能 

斗 斗 龙 x5 : 可 以 用 来 给 
GOGO 龙 x2 


对 万 的 龙 使 用 减速 
: 可 以 用 来 给 上 自己 的 龙 使 用 减速 
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形式 感 + 


网 页 视觉 设计 创意 拓展 与 快速 表现 


2. 分 要 所 


/NEE 


分 要 所 主要 是 强化 主 副 标题 的 表现 ， 并 梳理 逻辑 的 层次 天 系 ， 并 进行 适当 的 配 图 。 





TASK1 
端午 赛 龙 . 仙 羽 报名 


硕 望 仙 方 获胜 ， 可 在 逗 逗 龙 处 接 取 仙 方 任务 


时 间 和 地 点 


NPC 仅 在 14:00--15:00 和 20:00--21:00 出 现 
斗 斗 龙 长 安 广 场 ( 2528，743 ) 





道具 和 效能 
斗 斗 龙 x2 GOGO 龙 x5 
可 以 用 来 给 对 方 可 以 用 来 给 自己 
的 龙 使 用 减速 的 龙 使 用 减速 
lg 
3. 小 字眼 


提取 关键 词 ， 进 行 视 竞 加 强 ， 这 里 通过 手绘 及 标 红 的 方式 进行 关键 字 和 信息 的 强化 。 另 外 奖励 的 个 数 也 做 了 视 部 上 


的 统一 化 。 
(1 ) 重点 数据 : 时 间 、 地 点 、 数 量 参数 等 。 


( 2 ) 关键 字眼 : 特征 对 比 属 性 。 





TASK2 
闯 午 赛 龙 * 魔 王 报 名 


希望 魔方 获胜 ， 可 在 GOGO 龙 处 接 取 仙 方 任务 


时 间 和 地 点 
NPC 公 在 14:00--15:00 和 20:00--21:00 出 现 
斗 斗 龙 长 安 广场 ( 2524，743 ) 


道具 和 效能 
斗 斗 龙 x5 GOGO 龙 x2 
大 可 以 用 来 给 对 方 大 ; 可 以 用 来 给 自己 
的 龙 使 用 减速 的 龙 使 用 减速 





希望 仙 方 获胜 ， 可 在 逗 逗 龙 处 接 取 仙 方 任务 


时 间 和 地 点 
NPC 仅 在 14:00--15:00 和 20:00--21:00 出 现 
斗 斗 龙 长 安 广场 ( 2528 ，743 ) 


GOGO 龙 
可 以 用 来 给 自己 
的 龙 使 用 减速 


可 以 用 来 给 对 方 
;的 龙 使 用 减速 





好 吧 ， 事 情 殉 是 ， 

如 果 天 下 所 有 的 策划 交互 都 已 把 内 容 鄙 烂 ， 
那 还 需要 视觉 设计 师 做 什么 。 

言 轧 视觉 化 我 们 不 能 忽视 。 


光顾 着 做 主 视觉 的 设计 师 们 ， 还 不 赶快 行动 ! 
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端午 赛 龙 。( 仙 羽 报名 总 





闹 午 赛 龙 *、 讶 沟 报名 滩 
希望 魔方 获胜 ， 可 在 GOGO 龙 处 接 权 仙 方 任务 
时 间 和 地 点 

NPC 仅 在 14:00--15:00 和 20:00--21:00 出 现 
斗 斗 龙 长 安 广场 ( 2524 ，743 ) 


斗 斗 龙 
可 以 用 来 给 对 方 
” “的 龙 使 用 减速 


可 以 用 来 给 自己 
的 龙 使 用 减速 








尔 看 起 来 很 好 吃 





《 





你 看 起 来 很 好 吧 ”人 在 这 资讯 爆炸 的 时 代 ， 如 果 襄 资讯 是 我 们 必须 喂 给 用 户 的 食物 ， 那 用 户 往往 会 是 
一 群 偏食 厌食 的 宝宝 ， 如 何 让 他 们 乐意 香 下 这 送 到 噶 边 的 食物 呢 ”好 吃 ! 好 吃 当然 受 人 喜欢 ， 但 真 的 好 
不 好 吃 、 有 没有 襄 养 做 为 设计 师 的 我 们 还 真 决定 不 了 ， 不 过 "看 起 来 很 好 Me" 那 便 是 我 们 的 活 儿 了 ! 


"| 7 2 
信息 的 图 形 化 没 计 
"| 和 ee 
并 列 型 、 对 比 型 、 流 程 型 
形 意 结合 ， 视 觉 信 息 两 不 误 
1| Sr 1 做 做 
上 十 世纪 邮件 、 剑 灵 封 测 数据 公布 、C9 新 手指 引 专题 


形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





信息 的 图 形 化 设计 
这 是 一 种 对 信息 更 深入 理解 的 设计 方法 ， 较 之 前 提 到 的 关于 信息 黄金 排版 、 
4A 息 文 字 收 纳 等 在 逻辑 上 更 进一步 ， 是 通过 设计 师 对 信息 的 进一步 消化 的 图 形 化 
sg 也 称 数 据 图 形 化 。 近 两 年 在 各 类 的 数据 报告 表现 中 日 趋 走 床 。 而 我 们 也 可 
WDM" 以 将 其 利用 在 日 常 的 网 页 中 ， 使 信息 阅读 更 加 快捷 有 趣 ， 看 起 来 更 好 吃 。 








DELIGIOUS 


| LiKE TO EAT THE PEACHES 


为 了 配合 编辑 大 成 以 权谋 私 力 挺 女儿 上 位 的 行径 ， 特 黑 来 一 张 他 农 寻 妇 小 濑 的 高 清 无 码 屁 屁 照 ( 人 面 桃子 相映 红 ) 
给 大 家 作为 福利 。 在 此 祝福 小 流 胃口 棒 棒 ， 健康 成长， 也 信 此 来 打开 本 草 的 话 荐 儿 ， 如 何 让 食物 看 起 来 更 好 吃 。 


剥 屎 、 挑 刺 、 嚼 碎 ， 分 行 、 标 识 、 加 重点 。 正 如 F 型 的 阅读 排版 研究 只 是 针对 食物 的 食用 性 问题 在 一 定 程 度 上 解决 了 有 
阅读 需求 "的 用 户 的 扫 拉 性 阅读 ,但 对 于 偏食 大 食 的 宝宝 们 来 说 并 无 多 大 的 作用 。 所 以 除了 哼 小 曲 扮 鬼 脸 外 ， 我 们 必须 对 
食物 进行 有 效 地 包 沪 和 加 工 。 


如 果 它 激 友 了 你 的 食欲 ， 那 我 们 束 继 续 往 下 看 吧 。 


总 、 蔡 、 炒 、 炸 一 一 正如 食物 加 工 的 万 法 一 样 ， 大 篇 幅 的 文字 同样 也 有 着 几 种 可 归属 的 逻辑 关系 。 把 握 了 这 几 种 基 
本 的 逻辑 关系 ， 我 们 残 可 以 添 油 加 酶 ， 使 其 看 起 来 简单 有 趣 ， 让 人 充满 食欲 啦 ! 
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并 列 型 、 对 比 型 、 流 程 型 

先前 我 们 提 到 了 对 信息 的 收纳 ,是 对 信息 进行 归 类 整理 ， 在 这 一 章 里 ,我 们 
来 进一步 对 它 的 逻辑 进行 重组 和 图 形 化 。 重 点 在 于 剖析 几 个 事物 之 间 的 关系 ， 并 
将 这 种 关系 用 图 形 的 方式 表现 出 来 ， 在 这 里 ， 我们 简单 将 光 辑 中 最 常见 的 三 个 类 
型 进行 分 析 ， 它 们 是 : 并 列 组 合 型 、 数 据 对 比 型 、 步 双流 程 型 









一 、 并 列 型 


并 列 组 合 型 ， 它 可 以 是 有 共同 逻辑 关系 的 不 同事 物 ， 也 可 以 是 同一 事物 的 不 同方 面 ， 在 设计 表现 上 ， 它们 之 间 是 一 
种 平等 、 均 衡 的 状态 ， 而 在 这 些 内 容 的 表现 形式 和 结构 上 也 是 相对 一 致 的 。 我 们 可 以 结合 以 下 几 个 图 例 进 行 分 析 。 在 日 
常 的 设计 中 我 们 也 可 以 套用 以 下 的 几 个 图 示 来 表达 相近 的 逻辑 关系 。 


人 G95 


battery,banner, businesss Chart, electnicty economics, adtomic power station, battery, bannery business, chart, battery,banner business, cha 市 
collection, continent, country, elementigeographys graphics battery, banner bysiness, chart, eollection, continenty country; celleetions Continent, eountry, 
datas demooaraphics, design; gravestone; grungey icon, info, collection; continents Countrys data, demographics: design, data; demooraphics, design; 


document: ecology, iniochart infographics; data, demographics, design, document, ecology, documents eeology; 
electricity economics, information; label, leaf, map, document, ecology, electricity,economics, electricity, economies, 
alementige0graphy graphic mineral oilsold, ores paper electricity,ecoNomics, element,geography, graphie, element,geography; graphic, 








这 组 并 列 天 系 图 的 五 个 元 素 ， 它 们 虽然 没有 县 像 的 组 合 关 系 ， 但 它们 都 有 一 个 潜在 的 共同 属性 一 一 交通 工具 。 这 种 
由 潜在 的 关联 性 让 它们 组 成 了 形态 结构 一 怪 的 并 列 天 系 。 在 设计 上 用 并 列 的 排 布 、 相 同 的 布局 结构 、 统 一 风格 的 图 标 ， 
将 这 种 内 在 的 共同 属性 关系 表现 出 来 。 类 似 这 种 并 列 关系 的 ( 如 : 苹果 、 梨 、 香 太 它 们 里 不 组 成 什么 体系 ， 但 它们 同属 
于 水 有 果 ; 冰箱 、 电 脑 、 洗 衣 机 昌 不 构成 区 形 金刚 但 它们 同属 于 和 家电 或 机 器 ) ， 我 们 可 以 用 结构 一 至， 人 逻辑 上 并 列 但 不 组 
合 的 方式 来 表现 这 类 关系 。 


173 


形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





Ww Lorem ipsum dolor 
ydipiscing « 






作 \ Lorem ipsum 
dolor 
lorem ipsum dolor 





U 


Lorem ipsum dolor 
m ipsum dolor sit gmet, consectetur 
ydlir 1 


LA 


Lorem ipsum dolor 
Lorem ipsum dolor sit amet, consectetur 


这 个 并 列 的 逻辑 图 表达 了 三 个 内 容 : 首先 ， 它 们 是 四 个 并 列 的 元 素 ; 其 次 ， 四 个 元 素 组 成 了 一 个 共同 的 合体 ; 第 三 ， 
文 四 个 元 素 有 其 各 目 不 同 的 特点 。 这 种 远 辑 形式 是 最 单 见 的 : 比如 一 本 书 ， 它 由 几 个 章节 组 成 ， 每 个 章节 有 不 同 针 对 性 
的 内 容 ; 或 者 今天 的 午餐 由 几 道 菜 组 成 ， 每 道 荣 是 什么 食物 ， 口 味 有 何不 同等 等 ……。 当 我 们 遇 到 类 似 的 逻辑 天 系 时 ， 残 
可 以 套用 上 图 的 格局 。 





相对 于 上 一 张 的 并 列 组 合 形态 ， 这 张 并 列 的 组 合 则 是 具 像 的 ， 它 组 成 了 世界 地 图 ， 在 不 图 的 版 图 上 标识 着 不 同 的 特 
征 符 号 ， 昌 然 特征 符号 各 不 相同 ， ,但 地 理 位 置 之 间 以 朋 它们 的 特征 之 间 依 然 属于 并 列 关 系 ， 这 里 在 并 列 天 系 中 将 特征 图 
形 化 并 强化 。 如 果 特征 进一步 强化 ,并列 的 天 系 也 会 潜移默化 成 对 比 的 关系 ， 也 残 是 我 们 接 下 来 看 到 的 这 种 关系。 
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二 、 对 比 型 


对 比 关 系 是 指 两 个 或 两 个 以 上 的 事物 之 间 的 比较 ， 或 者 是 一 个 事物 的 几 个 方面 的 比较 。 它 是 在 并 列 天 系 基 础 上 强化 
特征 ， 并 通过 数据 或 图 形 进 行 可 视 化 的 比 对 。 它 是 并 列 关系 的 升级 和 特征 强化 。 对 比 关 系 区 别 于 并 列 关 系 的 特征 在 于 ， 
它 的 对 比 表现 高 于 它 的 并 列表 现 ， 通 音 是 需要 经 过 对 比 得 出 某 结论 而 存在 。 从 简单 的 二 者 对 比 到 多 个 元 素 之 间 的 对 比 ， 
从 并 列 的 单一 数字 呈现 到 数据 化 的 图 表 ， 从 横 轴 的 图 表 到 环形 的 图 表 ， 对 比 型 的 样式 因为 其 不 同 的 特征 而 拥有 许多 丰富 
的 表现 形态 。 下 面 我们 结合 图 表 来 看 一 看 。 


1 .两 个 数据 的 对 比 2. 多 个 同类 数据 的 对 比 
这 是 一 个 简单 的 二 者 之 间 的 数据 对 比 ， 它 强化 了 二 者 的 这 是 一 个 图 形 化 的 数据 对 比 图 。 在 图 表 上 有 既 把 并 列 
数据 差异 ， 并 通过 颜色 和 面积 来 辅助 表达 二 者 的 差异 性 。 的 事物 交待 了 ,又 把 它们 之 间 的 对 比 关系 形象 地 描述 了 。 


数字 在 这 里 起 到 了 补充 说 明 的 作用 。 


/全 mw 


Lorem ipsum dolor sit amet，consectetur adipiscing elit. 
Quilsque ac mattis risus,Vivamus a nulla sodales 


tiS 门 SUS VE > \ DO 
Lorem ipsum dolor sit amet, consectetur elit, 





0% | .由 了 100% 


3. 标 名 参数 的 同类 数据 对 比 4. 同 类 数据 的 多 层 属 性 的 对 比 
这 组 图 表 和 上 图 也 有 类 似 的 地 方 ， 它 们 都 是 通过 图 形 这 是 一 张 含 有 多 重 数据 的 图 表 ， 包 括 四 个 并 列 的 类 


和 数据 相 结合 的 方式 ， 只 是 这 张 图 标明 了 对 比 的 时 间 参 别 ， 每 个 大 类 别 有 一 个 忌 对 比 数 ， 而 每 个 大 类 中 又 有 四 
数 。 时 间 是 以 年 为 单位 ,油价 万 面 则 表现 了 一 个 上 涨 的 个 小 分 类 的 对 比 数据 ， 用 四 种 颜色 定义 ， 而 这 四 个 小 类 
趋势 ， 不 过 本 图 没有 具体 标明 上 涨 的 具体 数值 ， 仅 体现 别 的 红 、 黄 、 绿 、 蓝 又 可 以 分 别 独立 形成 四 个 分 类 ， 形 


了 一 种 趋势 。 成 细 分 对 比 。 这 种 多 层次 的 属性 对 比 层次 清晰 、 视 沉 的 


节奏 感 也 较 强 。 


€ 中 f£ ¥ 


Rh 
~“ 浊 J | hi ] 


2009 2010 2011 2012 8 7% 3 Ob™* YA4” 74 om 
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5. 非 同类 数据 的 对 比 6. 单 个 数据 的 轴线 图 
这 是 一 个 多 个 事物 之 间 的 数据 对 比 ， 它 们 可 以 是 单个 事物 的 轴线 变化 趋势 图 根据 横 轴 数值 的 递增 而 不 断 


非 同 类 事物 ， 也 可 以 是 具有 某 一 潜在 关联 属性 的 同类 变化 ,可 以 直观 看 到 一 个 事物 的 友 展 规律 和 趋势 。 
事物 。 统 一 风格 的 图 标 设计 和 统一 节奏 的 图 文 结构 为 
数据 的 对 比 打 下 了 视觉 基础 。 对 比 关系 区 别 于 并 列 关 
系 的 标准 在 于 ， 它 的 数据 和 特征 对 比 的 表现 高 于 它们 


之 间 的 并 列表 现 。 
号 31% 店 ”46% 的 21% 
@ 9% 87% Oy 
EF 63g x4 A ，U 
0,0 0,2 0,4 0,6 0,8 10 
7. 两 个 数据 的 轴线 图 


这 是 一 个 两 个 事物 的 对 比 数据 图 表 ， 
监 色 和 黄色 各 代表 了 两 个 事物 在 相同 环境 
下 的 不 同 数 据 表 现 。 从 中 我 们 不 但 可 以 看 
到 某 个 事物 的 变化 规律 和 趋势 ， 也 可 以 看 
到 两 个 数据 之 间 的 变化 天 系 。 





8. 多 个 数据 的 轴线 图 


这 是 一 个 多 个 事物 的 轴线 数据 图 ， 通 过 颜色 区 别 每 个 个 体 及 它们 在 不 同时 刻 的 数据 表现 。 较 之 前 面 两 张 图 有 了 更 加 
多 重 的 元 素 。 


Lorem ipsum dolor sit omet Lorem ipsum dolor st omet 





Lorem ipsum dolor sit 
-er rar orem osum Sobor Ht 


Lorem ipsum dolor 





《 Fru Soir 二 
Lorem ipsurm dolce 引 
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9. 环 形 对 比 数 据 图 表 


数据 对 比 图 表 并 不 仅 限于 直线 ， 还 有 圆 形 的 数据 图 ， 它 代表 着 逻辑 上 的 并 列 
和 包含 关系 ， 并 通过 长 度 和 数值 表达 它们 之 间 的 差异 。 


10. 环 形 组 合 对 比 数据 图 表 


这 是 在 并 列 组 合 结构 基础 上 的 数据 对 比 图 ， 三 个 基本 内 容 : 一 ， 几 
个 事物 属于 并 列 关 系 ; 二 ， i 是 一 个 事物 的 几 个 并 列 分 
类 ; 三 ， 这 几 个 并 列 事物 之 间 有 着 数值 的 差异 并 明确 标识 这 种 差异 的 具体 数字 化 





三 、 流 程 型 


流程 也 是 在 并 列 基 础 上 的 升级 ， 它 是 指 处 于 并 人 询 天 系 的 两 个 或 两 以 上 的 单位 ， 它 们 乙 间 具 有 前 后 的 任务 天 系 ， 共 同 
拥有 一 个 目标 和 万 向 并 共同 完 一 个 完整 行为 ， 这 种 天 系 称 之 为 流程 关系 。 流 程 天 系 在 商业 运作 、 操 作 捐 导 或 是 任务 况 明 


中 也 是 很 常见 。 

1. 两 个 任务 的 流程 关系 

最 简单 的 流程 就 是 从 A 到 B， 它 们 是 并 列 的 、 组 合 的 、 有 先后 顺序 的 关系 。 
A > 在 流程 型 的 逻辑 表现 中 箭头 图 示 是 最 常用 的 。 


2. 多 个 任务 的 流程 关系 


这 是 一 个 单 回 的 渐进 流程 ， 在 流程 的 表现 中 我 们 也 可 以 通过 色彩 来 区 分 ， 并 
且 通 过 比例 来 增强 表现 它们 的 量 级 的 对 比 关 系 。 这 些 都 是 可 以 同时 存在 的 ， 只 要 
在 节奏 上 处 理 得 当 ， 是 可 以 不 互相 干扰 的 。 


3. 多 个 支线 流程 \ 4. 循 环流 程 
流程 并 非 都 是 直线 型 流程 是 可 以 循环 
的 ,这 是 一 个 分 流 的 流程 图 ， ~ 外 的 ， 它 可 以 从 重复 的 、 
它 可 以 由 一 个 事物 分 流向 两 . 狗 续 。 无限 的 依照 菏 个 规律 
个 事物 ,也 可 以 从 两 个 事物 到 在 几 个 事物 之 间 循 环 
再 汇聚 到 一 个 事物 。 \ 入 oy ~ 寺 续 进行 下 去 。 正 如 
可 我 们 的 天 气 一 样 ， 海 


水 共有 友 变 成 云 ， 云 汇 
聚变 成 雨 ， 雨 又 流 问 
大 海 ， 海 水 继续 蒸 皮 


Lorem ipsum 
dolor sit 
amet 
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形 意 结合 7 视觉 信息 两 不 误 


数据 图 表 在 网 页 设计 中 的 运用 中 可 以 关注 两 点 ; 一 个 是 主题 形式 与 数据 图 表 
的 结合 ， 主 题 可 以 丰富 图 表 的 表现 形式 ， 图 表 也 可 以 深化 主题 的 信息 表现 ; 第 二 
个 是 图 表 与 网 页 交互 的 搭配 ， 在 信息 的 概括 收纳 以 及 交互 执行 上 ， 图 表 都 可 以 起 
到 一 定 的 辅助 配合 作用 。 











并 列 型 


cr wre So 这 是 一 个 期 待 棒球 
场 八 百 万 观众 席 的 专题 
页 面 ， 图 中 模拟 观众 席 
ee RE 的 主 视觉 对 多 个 方 阵 的 
个 色 块 的 观众 席 属于 并 
列 组 合 的 关系 。 从 图 中 
引出 的 内 容 结合 了 操作 
按钮 。 信 息 浏览 直观 且 
交互 性 较 好 。 


012 工本 DT 800 人 t 车 各 全 总 绪 OH? 会 寺 志 对 似 喝 拷 引 XH 


ta 让 着 州 2 FY | 1Y, i 
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ome 72!: G02 ~ GUI62 (15212)) 


廊 ua 


MW ST DOIFPS HB SOS 


LG22 mh 
a kd | 
S99: 0 
一 


钦州 o B04 各) 谨 名 |[! 


NeQwWiz smegars 





这 是 CF 世界 大 站 专题 页 ， 通 过 地 图 将 几 个 分 散 的 活动 区 域 天 联 起 来 。 几 个 活动 区 域 之 间 是 并 列 关系 。 





van orncul ere bwuo me Queow 
它 由 枪支 组 成 。 这 是 一 个 半圆 形 的 组 合 和 并 列 关 系 。 分 散 出 来 的 枪支 


这 个 页 面 的 主 视 党 是 一 个 骨 骨 ， 
和 由 枪支 组 成 的 山 仍 也 从 图 形 上 说 明了 这 种 信息 之 间 的 并 列 组 合 关系 。 
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二 、 对 比 型 


ED PSTPS ABs. RPG onols qe D4 MY 要 列 鸡 介 二 交 条 


A- tkd SATII O09 e Ve 50 UE TH 


二 EEC 


9 但 匡 7 2009H SQ 27Y E16Y 36 昌 (24D) 


go 要 时 7 


5000 OP 


| 


OFRHA 


gf0f 晴 如 7 


各 |od 到 相 号 忌 


001 加 如 





轴线 是 对 比 型 常用 的 图 形 表现 方式 ， 这 种 基础 的 轴线 型 数据 在 这 个 页 面 很 好 地 与 内 容 结 合 。 
这 是 CF 鱼 场 的 管理 页 面 ， 主 视 竞 和 内 容 分 抽水 上 和 水 下 ， 鱼 和 透 监 色 的 数据 图 生动 地 融合 在 一 起 ， 
既 充 分 展现 了 数据 ， 又 直观 展示 了 场景 ， 做 到 了 形 与 意 的 丰满 结合 。 


EVENT 2. 
0itiPC 过 串 售 100 开 幸 卫 , 对 0FO] 央 峙 0171Xh~ 


0| 喇 巨 71jzt 车 8 OHHHPC 导 他 夺 对 人 19 号 得 妈 个 圳 左 tel 4 寺 0H0| 蕊 芒 三 基 LID. 
OHHHPC 革 型 禽 中 圳 二 7| 基 天 什 (10 弄 ) 旱 对 到 外 吕 三 引出, 对 时 可 对 018}HMI 全 ~ 


100 型 


80 对 甘 开 车 多 上 XPO6(15 久 


对 引 器 纪 i 看 蛋 人 (15g) 






20 对 
15 对 号 可 对 对 100% 
品 ? 


10 始 


吕 己 | 封 2(900) 





Lar9| 号 亚 于 伴唱 世人 到 直人 纪 , 世 到 量 记忆 部 0 到 个 午 到 0| 介 对 冒 UD. 
但 381 章 , 对 8! 革 个 双 合 UC)) 


这 是 一 个 简单 的 柱 形 图 表 ， 柱 状 图 的 左右 两 个 的 指标 分 别 是 0、10、15、20 和 80、100， 这 种 


有 倾向 的 标注 ,突出 强化 了 100 和 80 两 项 ,并 在 它们 的 下 万 增加 执行 按钮 ， 将 图 表 和 执行 一 体 化 ， 
读 图 操作 更 加 连贯 。 
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三 、 流 程 型 


| 
v 


Ne 


PSTGMPANY 





| 
v 


DAD 


THE VISION THING 

How Maxry Sconstss RISK 
lr AU AND Livie 10 RISK AGAIN 
Im Hourwooo 


| 


Y 
SCORSESE’S VISIONARIES 
Dintcrons AND CHARACTIRS Wno 
Rowip TIE Dicr 


Y 
THE DISRUPTERS 
CAN Tuume CaiAnVY Win Bo IN 
TH Busmsss Wono? 








CO.CREATE NATION 
MArrNG rt New Catanvt Nixvs 
Of SIucom VaritY, Hourwooo, 
AND MADISON Avinut 


| 


v 

















一 个 比较 复杂 的 流程 图 表 ， 它 包含 了 多 项 的 、 分 流 的 、 汇 聚 的 、 循 环 的 流程 类 型 。 作 者 将 这 么 多 的 流程 箭头 归 
RS ,内容 昌 多 ， 但 指向 明确 清晰 。 
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人 | 人 HH 厂 攻 ah 


0| 汪 7] 外 岂 导 | 可 并 包 旺 对 0| 早 2 10blL 
针 gj7|L74s| 对 7| 笃 3,000 对 0| OH 车 虹 基 clal 2 局! 













寺 
双 齐 他 
双 站 介 旦 对 104 
志江 人 昌 i 时 对 10 明 E10 ~ 
雪人 对 10 骨 有 一 ey 


aces 
导 z|F > 
see uy se 3 AIe xt wel te. EE 


这 是 一 个 市 对 比 属性 的 流程 图 ， 它 们 之 间 既 有 对 比 关 系 又 有 流程 关系 。 由 低 到 高 、 颜 色 
由 浅 入 深 的 蓝 色 配合 楼 色 的 简 头 指示 和 直观 展示 了 你 辑 关系 。 最 后 用 蓝 色 大 方块 上 的 角色 点 睛 ， 
给 有 目标 以 明确 的 指示 ， 还 配 有 楼 色 小 气泡 ， 整 体 逻 辑 清晰 ， 风 格 杀 和 有 爱 。 
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Copyright @ NHN Corp. AJl rights reserved., 


[0 则 页 设计 斯 展 稻 www 68design net 


是 一 个 活动 里 程 表 ， 它 将 多 个 活动 通过 者 道 贯穿 在 一 起 ， 而 每 个 活动 之 | 间 有 先后 顺序 ， 
玩家 参与 时 必须 依照 赛 道 指 同 的 流程 依次 进行 ， 它 将 形 和 意 元 整 结合 起 来 ， 整 体形 式 感 比较 强 。 
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上 古 世 纪 邮 件 、 剑 灵 封 测 数据 公布 、C9 新 手 
指引 专题 

对 应 "并列 型 '、' 对 比 型 "、' 流 程 型 三 种 逻辑 ， 我 们 分 别 举 一 个 例子 。 在 设计 
过 程 中 我 们 可 以 套用 各 自 的 远 辑 图 表 进 行文 字 的 远 辑 图 形 化 。 











《上 上 古 世 纪 》SLOGAN 内 部 征集 邮件 
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形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 


一 、 需 求 分 析 


以 上 图 虚线 框 中 的 内 容 举例 ， 这 是 一 个 长 篇 信息 ， 如 果 直 接 将 内 容 拷贝 进 网 页 ， 会 大 大 降低 页 面 整 体 阅读 的 食欲 。 
如 果 我 们 用 文字 衣 橱 的 万 了 式 进 行 收纳 内 容 又 太 多 ， 因 为 叙述 性 太 强 ， 比 较 难 收纳 。 所 以 这 里 我 们 通过 图 形 化 将 其 进行 
辑 表 现 ， 然 后 再 配 以 文字 说 明 。 


进行 多 


并 区 关系 是 大 多 数 逻 辑 天 系 的 起 源 ,不 论 是 对 比 天 系 还 是 流程 天 系 ,它们 都 是 在 并 列 关 系 的 基础 上 进行 有 侧重 地 描述 。 
在 这 种 关系 基础 上 我 们 再 思考 它们 的 细 分 类 型 ， 比 如 它们 是 各 目 独 立 但 具有 同一 属性 的 并 多 关系 ， 还 是 共同 组 成 一 个 完 
整体 系 的 并 列 关 系 ， 洒 或 是 一 种 层级 递 进 、 层 层 深入 的 并 列 关系 。 然 后 根据 内 容 的 需要 对 它 进行 图 形 化 。 


在 这 一 类 快速 专题 中 ， 我 们 可 以 迅速 套用 之 前 方法 总 结 里 的 数据 图 表 ， 来 快速 地 将 长 篇 文字 图 形 化 。 面 对 长 篇 文字 
的 时 候 可 以 先进 行文 意 的 梳理 ， 拉 开 每 个 段落 的 节奏 ， 强 化 标题 ， 并 给 大 标题 配 上 辅助 说 明文 字 ， 方便 快 速 阅 读 ， 然后 
再 咀嚼 内 容 ,分 析 它 的 逻辑 关系 。 由 于 大 部 分 的 逻辑 关系 都 源 于 并 列 的 关系 ,在 没有 特别 明显 的 数据 对 比 或 流程 的 情况 下 ， 
我 们 都 可 以 将 其 归 类 于 并 列 关 系 ， 然 后 再 把 握 其 进一步 的 逻辑 和 主 次 。 这 个 案例 的 梳理 图 较为 简单 ， 是 逻辑 快速 套用 的 
尝试 作品 。 它 可 以 在 很 短 的 时 间 内 梳理 摆布 完成 大 篇 幅 的 文字 。 当 然 , 有 人 说 ， 电 影 不 如 有 声 小 说 ， 有声 小 说 不 如 原著 ， 
因为 纯 文字 的 书 有 更 多 的 想像 空间 ， 因 为 每 个 人 对 信息 的 理解 各 有 不 同 ， 图像 化 也 便 是 设计 师 通过 对 信息 理解 而 进行 的 
进一步 的 设计 表现 。 





有 些 信息 是 快速 消费 ， 有 些 信息 是 经 典 艺 术 。 如 果 阅 无 形 和 有 形 各 有 利 浆 ， 那 瓯 努力 将 目 己 训练 成 一 个 信息 的 好 导 
演 吧 。 


二 、 设 计 分 解 


0 全 球 项 级 制作 团队 


游戏 是 由 知名 的 制作 人 ， 带 领 具 的 国际 研发 团队 ， 投 入 大 量 的 时 间 、 精 力 和 金钱 ， 用心 打造 的 大 作 。 


@ 宋 在 京 社 长 


韩国 游戏 第 一 人 ， 对 韩国 网 游 发 展 历 史 起 到 了 关键 作用 ， 
ncsoft 和 nexcon 的 创始 人 之 一 ， 其 代表 作 天堂 》、 《天 堂 2》 。 


全 Rg 证 全 RR 四 


韩国 第 一 物 销 书 美女 作家 。 
代表 作 有 《岁月 之 五》、 《天 辟 之 链 》 等 。 










她 亲自 主持 设计 了 《上 古 世纪 》 到 

的 世界 观 和 剧情 。 号 © 美术 总 点 尹 龙 基 

seseoeooedeosooooo oe oo | » 恬 龙 基 先 生 有 具有 十 多 年 的 北美 等 国际 工作 
经 验 。 代 表 作 有 电影 《泰坦 尼克 号 》、 
4 楚 门 的 世界 》， 游 戏 《 最 终 如 想 》、 
作战 局 2》 等 。 

《人 Sd300 人 

团队 成 员 来 自 于 各 大 知名 网 游 公司 (05) 

超过 300 人 ， 核 心 成 员 分 别 参 与 过 研发 成 本 超 3 亿 

多 款 国际 热门 游戏 的 策划 制作 ， 根据 粗略 推算 ， 

具有 丰富 的 全 球 研发 经 验 。 游戏 开发 已 经 投入 超过 3 亿 人 民 币 。 


第 一 部 分 是 对 制作 团队 的 介绍 ， 包 括 三 个 主要 人 物 和 一 个 300 人 的 研发 团队 以 及 3 亿 的 研发 成 本 。 这 里 我 们 将 这 五 
个 信息 定义 为 并 列 关 系 。 图 形 上 突出 三 个 主要 人 物 ， 将 300 人 的 研发 团队 以 虚拟 人 物 的 形式 平 铺 在 背景 上 ， 并 在 各 自 相 
应 的 位 置 用 需求 中 的 文字 进行 补充 说明 。 这 样 残 有 了 视 嘻 的 核心 ， 赔 读 起 来 也 相对 有 了 可 依附 的 实体 ， 文 字 信 息 也 便 更 
形象 了 起 来 。 分 要 扣 的 拉 述 也 同样 注重 文字 排 布 的 证 奏 ， 序 号 、 主 标题 、 详 情 文 字 ， 这 样 的 形式 不 论 扫 描 阅 读 还 是 细致 
阅读 都 能 满足 。 另外 由 于 人 类 的 本 能 ,我 们 的 眼睛 对 人 脸 是 有 极 大 的 关注 和 兴趣 的 ,适当 的 使 用 人 脸 可 以 增强 阅读 的 欲望 。 
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超越 历史 的 游戏 品质 


刀 土 谍 aN > 串 
游戏 品质 超越 了 出 06 的 历史 ， 高清 3D 贡 必 电影 级 画面 、 身 临 其 境 的 音效 、 唯 美的 音乐 、 以 及 空前 恢宏 的 游戏 世界 ,在 闹 听 体验 
等 名 方 血 ， 均 能 达到 前 所 未 有 的 字 受 。2010 年 GSTAR 期 昌 ，《 魔 兽 世 界 小 首席 设计 师 Jesse NeCree、NCSoft 创 始 人 金 冬 撒 、CI 
CE0 南 宫 勋 、IWC 


GANWES 社 长 金字 圭 先后 参观 试 折 了 《4 上古 世 纪 》 ， 并 当 志 盛装 上 古 世 纪 的 创新 。 





01 EE 


采用 目前 世界 最 先进 的 
CryEngine39| 擎 开发 ， 
并 成 为 运用 该 引擎 的 标志 性 产品 。 


EEEEEEEEEEEEEEEEEEEEEEE 和 EE 


游戏 品质 


HIGH QUALITY 


人 的 世界 规模 


是 目前 游戏 史上 最 宏大 的 世界 ， 
给 玩家 提供 丰富 和 自由 的 发 展 空间 。 


这 是 游戏 品质 介绍 部 分 ， 品 质 、 规 模 、5 


环 饼 图 ， 表 达 出 一 种 游戏 品质 由 这 四 类 构成 的 并 多 组 合 的 大 逻辑 ， 


束 一 目 了 然 了 。 





但 曾 


采用 精度 极 高 的 30 模 型 ， 


(04 有 EE 


又 新 的 理念 和 玩 

最 具 创 新 的 理念 
在 前 两 代 网 游 的 基础 上 ,提出 并 实现 了 创新 的 理念 与 核心 玩法 ,玩家 从 被 动 的 游乐 场 式 体验 ， 
成 为 游戏 世界 的 改造 


告 者 或 设计 者 ， 最 终 创造 自 己 个 性 化 的 游戏 世界 ， 感 受到 前 所 未 有 的 游戏 体验 。 


达到 高 清 3D INWAX 电 影 级 的 视觉 效 果 。 


EE 


由 韩国 著名 音乐 人 申 海藻 、 
尹 尚 制作 ， 著 名 的 韩国 首尔 
爱 乐 乐团 现场 录制 游戏 音乐 。 


和 擎 这 样 的 概念 我 们 很 难 用 有 具体 的 图 形 表示 它 ， 所 以 这 里 选择 了 套用 这 个 圆 
有 了 图 形 的 依附 再 深入 填充 具体 文字 ， 天 系 和 内 容 也 


(0 充满 未 知 与 支 数 | 
游戏 并 不 是 一 成 不 变 地 按照 固定 03) 玩家 改变 世界 
模式 进行 ， 玩 家 探索 过 程 中 玩家 可 以 通过 自己 的 行为 ， 
充满 了 偶然 与 惊喜 。 可 能 获得 充满 未 知 与 变数 永 扩 改变 游戏 世界 。 补 潭 变 绿洲 、 
完全 不 一 样 的 游戏 体验 和 结果 。 海边 建城 堡 、 大 河 建 桥梁 ， 
Me se 玩家 本 以 自由 建 法 席 星 、 村 庄 、 
“> 城市 、 战 船 等 ,并 可 以 开 莫 种 地 
养殖 动物 等 。 
(0 更 高 的 自由 度 I 
游戏 为 玩家 提供 更 多 的 可 能 和 选择 
提供 了 丰富 的 自 定义 和 自由 设 定 功能 ， > Lo1) 真正 的 虚拟 世界 
玩家 可 以 创造 更 多 的 创新 玩法 。 更 高 的 自由 度 
GE 汪 游戏 世界 有 季节 变迁 、 屋 夜 交 替 、 
> 风景 各 异 的 地 形 地 狐 、 庞 大 的 社会 体系 、 
真正 虚拟 世界 有 上 自己 生活 的 HPC ， 


在 理念 和 玩法 部 分 ， 使 用 了 逐 层 


玩家 真实 生活 在 宏大 的 虚拟 社会 。 


并 


出 的 高 度 目 由 既而 推动 着 玩家 改变 的 可 和 性 ,最 后 产生 充满 打 知 和 变数 的 游戏 乐趣 。i 


有 了 这 些 图 形 ， 浏览 者 在 面 对 大 量 文字 时 丈 可 以 相对 不 那么 


汇 然 和 无 所 适 从 。 


这 是 在 并 列 基础 上 的 进 


影响 和 扩张 的 并 列 递 进 的 关系 ， 用 四 个 由 小 到 大 的 环形 圈 来 表达 ， 从 由 虚拟 世界 5| 


一 步 图 像 化 ， 
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形式 感 + 一 一 网 页 视 帝 设计 创意 拓展 与 快速 表现 


刀剑 灵 封 测 数 据 公布 


BEE EVA 


各 职业 谁 最 先 到 达 顶 级 的 玩家 ( 分 职业 ) 
小 篇 游 十 花 剑 士 ” 2012-12-29 06:10:17.247 

胡子 拉 擦 、 小 妞 拳师 ”2012-12-29 06:30:30.947 

F、 小 宣 宣 | ,、、 气功 师 2012-12-29 06:47:01.763 

、\ 帝 痕 力士 。” 2012-12-29 06:47:39.967 

爸爸 说 网 名 很 长 很 帅气 、 召唤 师 2012-12-29 09:05:31.697 
洪 门 、 猴 子 刺客 2012-12-29 06:17:24.850 


封 测 在 线 时 间 最 长 的 玩家 ( 分 职业 ， 单 位 秒 ) 
墨 纤 雪 剑 士 1926477 

叶 签 彬 、 拳师 ”1946840 

一 口 井 气功 师 1839871 

天 狐 力士 ”2667626 

落 璃 召唤 师 1683682 

幽 寻 之 往生 刺客 。 1936441 


被 3 大 BOSS 击 杀 最 多 的 是 哪个 玩家 ( 分 职业 ) 


忽 雷 : 炎 煌 : 火炮 兰 : 

小 上 剑 上 十 22 破 芭 神 兵 ”便士 34 因 幅 白 免 | 
大 斌 小 将 “拳师 22 许 蔡 拳师 41 简单 偶 拳师 89 
Tank ”气功 师 27 邻 家 小 妹 ”气功 师 28 一 口 井 气功 师 99 

被 嫌弃 的 秋 叶 、 力士 19 蓝 炎 站 力士 ”29 批发 切 糙 ”力士 51 
缘 缘 召唤 师 22 、\ 小 默默 。 ”召唤 师 21 AOL'、 众 栖 召唤 师 98 
神 行 太 保 ”刺客 25 5173 少 俊 ”刺客 26 East 虚空 “” 刺 客 98 


雷 、 炎 煌 、 火 炮 兰 击 杀 玩 家 数 
se 15149 
炎 煌 : 12566 
火炮 兰 : 9933 


单个 玩家 死亡 次 数 : 
139 
最 多 玩家 死亡 次 数 : 


1094 


玩家 平均 时 装 数 : 


15 件 





一 、 需 求 分 析 


这 是 一 个 剑 灵 封 测 数 据 ， 希望 能 够 通 a 由 于 公布 日 期 正 值 年终 ， 所 以 整 
We 过 则 依附 于 “公布 年 终 考核 "这 样 一 个 形式 概念 。 玩 过 游戏 的 玩家 都 知道 " 洪 七 公 " 是 洪 门 的 师 传 ， 所 以 网 页 使 用 
洪 七 公 的 形象 来 贯穿 整个 表现 。 
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二 、 设 计 分 解 


09 你 看 起 来 很 好 吃 





我 们 查看 整体 的 文字 信息 ， 主 要 是 对 玩家 在 测试 中 的 数据 进行 对 比 和 公示 。 所 以 我 们 选择 对 比 的 结构 进行 图 表 化 ， 


下 面 我 们 针对 每 一 块 的 数据 内 容 进行 分 析 设 计 。 


1. 各 职业 谁 最 先 到 达 顶 级 的 玩家 





小 访 游 十 花 剑 十 
胡子 拉 擦 、 小 如 拳师 
F、 修 实 实 | 气功 师 
、 帝 闵 力士 


区 区 襄 网 名 很 长 很 刷 气 召唤 师 





洪 门 、 猴子 刺客 
EE 
小 扁 游 十 花 洪 门 、 狼 子 胡子 拉 擦 、 小 妞 


2012=12=29 06:10:|7.247 


2012=12-29 06:30:30.947 


2012-12-29 06:47:01.763 


2012-12-29 06:47:39.967 


2Ul2=l2-29 0905.310697 


a0l2=|2=29 U6:17:24.850 





气功 斤 国生 力士 召唤 师 
F、 小 证 坎 | 、 帝 瘦 区 区 说 网 名 很 长 很 帅气 





2I0I11281282I9 





从 提供 的 数据 来 看 ， 第 一 部 分 的 数据 主要 展示 了 不 同 职业 最 快 满 级 玩家 的 时 间 点 ， 由 于 大 家 满 级 的 日 期 是 同一 天 ， 
所 以 我 们 用 小 时 和 分 钟 为 单位 来 摘 述 它 ， 通 过 时 钟表 现时 间 ， 依 照 时 间 的 先后 从 左 全 右 依 次 排列 。 在 时 间 表 的 下 方 匹 配 
了 洪 七 公 搞 笑 表 情 。 弹 出 的 小 对 话 框 中 加 入 “ 干 得 不 错 ' 的 字样 ， 为 视觉 增添 了 有 爱 的 气 须 。 
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形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





2. 在 线 时 间 最 长 的 徒 儿 们 





墨 纤 丰 剑 士 1926477 
叶 第 彬 拳师 1946840 
一 口 井 气功 师 1839871 
大白 i 2667626 
沙 璃 召唤 师 1683682 
幽 奸 之 往生 刺客 1936441 

















2667626 


一 口 井 ” 痪 螨 之 往生 ”天 狐 


落 璃 | 黑 纤 雪 | 叶 筱 彬 | 


zz 末 | 介 二 | 利 客 | 尖 





第 二 部 分 的 数据 是 展示 在 线 时 间 的 长 短 ， 因 为 时 间 的 直接 联想 是 钟表 ， 所 以 在 第 二 部 分 的 数据 图 形 化 中 ， 我 们 使 用 
了 环形 数据 对 比 的 模板 ， 因 为 也 正好 契合 了 圆 形 的 时 间 表现 万 式 ， 通 过 缴 线 的 长 短 来 模拟 在 线 的 时 间 长 短 。 在 圆 形 图 表 
的 中 央 置 入 洪 七 公 师 传 损 头 的 小 插画 ， 边 上 配 以 努力 的 孩子 "的 文子， 将 数据 的 合 勾 进行 了 拟人 化 的 点 睛 。 
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09 你 看 起 来 很 好 吃 


3. 被 3 大 BOSS 击 杀 最 多 的 徒 儿 和 击 杀 总 数 











【被 3 大 BOSS 击 杀 最 多 的 是 哪个 玩家 】 火炮 主 
忽 雷 : 因 幅 白 免 剑 士 73 
小 尘 剑 士 22 简单 偶 拳师 89 
大 斌 小 将 拳师 22 一 口 井 气功 师 99 
Tank 气功 师 2 批 友 切 糕 JE 5 
被 嫌弃 的 秋 叶 “力士 19 AOL 全 楼 召唤 师 98 
缘 缘 召唤 师 22 East 虚空 刺客 98 
神 行 太保 刺客 25 
【 忽 雷 、 炎 煌 、 火 炮 兰 击 杀 玩 家 数 】 

炎 焊 : 忽 雷 : 15149 
破 苑 神 兵 剑 士 34 汉 伯 < T2566 
申 珍 拳师 41 火炮 兰 : 9933 
邻 家 小 妹 气功 师 28 
匡 光 wn 四 29 【单个 玩家 死亡 次 数 】 : 139 

A 召唤 师 21 【最 多 玩家 死亡 次 数 】 : 1094 
5173 少 俊 刺客 26 














剑 士 拳师 气功 师 力士 召唤 师 刺客 


本 





由 于 同 是 BOSS 击 杀 的 数据 ， 所 以 我 们 将 3、4、5 三 个 板块 的 信息 进行 了 整合 。 使 用 了 同类 数据 多 层 属 性 的 对 比 模 
式 图 形 模板 ， 将 细 分 的 最 高 击 杀 数 和 击 杀 忌 数 进 行 了 整合 表现 。 单 个 玩家 的 平均 死亡 次 数 和 最 高 死亡 次 数 通 过 人 形 的 大 
小 进行 表示 。 石 侧 配合 洪 七 公 倒 地 的 插图 ， 附 上 对 话 " 平 日 里 不 好 好 练功 ”， 暗喻 着 今天 被 杀 的 惨状 。 
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形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





4. 玩 家 平均 时 装 数 





玩家 平均 时 闪 数 : 15 件 











4 玩家 平均 时 闪 数 





第 四 部 分 的 设计 比较 简单 直接 ， 用 一 件 衣服 筋 影 来 表示 时 和 妆 ， 并 使 用 大 字号 标识 “12 件 " 强 化 数字 ， 通 过 洪 七 公 石 侧 
的 服 委 展 示 和 碟 侧 的 配合 文字 “衣服 倒是 有 不 少 啊 ! "或者" 你们 都 是 爱美的 货 " 等 等 来 补充 说 明 ， 又 将 整体 气氛 有 爱 化 。 
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09 你 看 起 来 很 好 吃 





三 、 贝 面 展示 









As 


人 徒 儿 们 1 全 


洪 门 年 终 考 核 出 来 啦 @ 


【2012.11.26-2013.1.13】 创 灵 极 智 封 测 敌 据 首 度 大 公开 





1 各 职业 最 快 满 级 的 徒 儿 们 ! 


OOOOOL 


09:05 06:47 06:47 06:30 06:17 06:10 


辆 21I0I1128124219 


3 被 3 大 BOSS 击 杀 最 多 的 徒 儿 和 击 杀 总 数 
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形式 感 + 一 一 网 页 视觉 设计 创意 拓展 与 快速 表现 





中 三 C9 新 手指 引 专 题 


EE 


怎么 玩 C9 


1. 完 成 新 手 五 步 

[注册 账号 ] [下 载 安装 ] [进入 游戏 ] [创建 角色 ] [开始 任务 ] 
2. 学 会 基本 操作 ， 了 解 界面 说 明 

3. 学 习 使 用 F1 帮 助 

4. 记 住 简单 连 击 

5. 组 队 副 本 升级 快 [如 何 组 队 ] 

6 .勤快 做 任务 [查看 任务 系统 ] 

7. 学 习 技 能 、 完 成 转 职 


8. 连 击 动作 多 练习 





这 是 C9 新 手指 雨 的 "如 何 快速 上 手 “ 的 介绍 页 面 。 主 要 由 8 个 内 容 组 成 ， 这 些 内 容 之 辣 有 先后 顺序 关系， 具体 的 内 容 
通过 扣 击 跳 转 到 相应 的 页 面 。 根 据 内 容 的 关系 ， 我 们 可 以 将 其 设计 成 流程 关系 的 图 表 。 
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忆 如 何 快速 上 手 ? 
, How 0 


qusckly Bes started? 


这 个 案例 比较 直观 ， 在 这 里 我 们 仪 做 一 下 简要 的 分 享 。 





这 里 我 们 将 流程 图 表 设 定 为 地 图 的 样式 ， 每 个 步骤 作为 一 个 任务 ,点击 区 域 和 流程 感觉 更 加 鲜明 ， 并 加 入 了 地 图 桩 
式 的 手绘 ， 为 阅读 过 程 增 添 了 游戏 性 ,整体 视 党 和 交互 的 趣味 性 也 优 于 纯 文字 的 流程 表现 。 
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tJ4J 多 py 


l= E S/N 
们 少 了 它们 ANN SED = 
样 重 要 | 


"| YO 2 
网 页 中 的 小 装饰 
1 Yr/ 想 想 
小 图 标 、 小 序号 、 小 字 、 小 手绘 
I1(O) 做 做 
剑 灵 新 年 专题 


形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





页 中 的 小 装饰 
钉 钉 钾 钾 指 的 是 网 页 设计 中 的 小 装饰 ， 它 并 非 主体 的 形式 感 或 者 大 的 U| ， 
而 是 网 页 设计 中 非 主体 的 装饰 ， 比 如 一 个 小 图 标 、 或 者 一 些小 修饰 ， 正 如 服饰 搭 
Da 配 中 的 一 整套 行头 ， 钉 钉 钾 钾 则 是 这 套 行头 中 的 小 手 饰 、 小 链子 等 ， 这 些 看 起 来 
可 有 可 无 的 小 装饰 实 实在 在 地 衬托 出 了 主体 的 服饰 的 个 性 与 味道 。 














HP pp" 


4 
‘\ 


WW 





等 
好 和 全 全 全 


有 这 梓 一 个 收 亚 的 传 况 : 

很 久 很 久 以 前 ， 一 个 姑 妃 的 照片 不 好 看 只 能 证 明 她 长 得 不 好 看 。 而 现在 ， 一 个 姑 妃 的 照片 不 好 看 至 少 能 证 明 三 件 事 : 
第 一 ,她 长 得 不 好 看 ( 天 资 一 般 ) ; 第 二 ,她 不 大 会 或 者 不 大 爱 打 扮 目 己 ( 活 得 不 太 讲究 ) ; 第 三 ,她 也 不 大 玩 儿 得 转 PS( 忆 
也 不 是 个 心灵 手巧 的 ) 。 

所 以 作为 姑 妨 懂得 打扮 和 搭配 很 重要 ， 拱 配 好 了 “， 老 人 的 衣服 上 号 也 能 穿 出 复古 的 韵味 。 

换个 角度 襄 ， 对 于 设计 上 “ 委 修 "也 是 一 样 的 。 轻 于 修 ， 重 妆 饰 ， ai 是 指 委 修 重点 要 在 
陈设 沪 饰 上 下 功夫 。 这 种 万 式 一 万 面 是 容易 适应 时 代 的 审美 变化 ,便于 更 新 ， 另 一 万 面 也 容易 ee 了 主人 的 1 VS 人 全。 








RE 做 为 一 个 网 页 设计 师 ， 我们 与 其 抱怨 素材 大 惨淡 ,不 如 多 投入 点 时 间 为 网 页 和 素材 做 点 小 沪 饰 、 小 搭配 ， 
毕 葛 天 资 过 人 是 欧 女 说 了 算 ， 活 得 讲究 则 是 目 己 的 态度 。 


下 面 我 们 一 起 来 看 看 网 页 设计 中 ， 这 些 可 以 为 我 们 加 分 的 " 钉 钉 名 甸 " 的 小 汪 饰 ， 做 一 个 讲究 的 设计 师 。 
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小 图 标 、 小 序号 、 小 字 、 小 手绘 

我 们 将 网 页 中 的 这 些 常用 小 装饰 整理 成 四 个 类 别 : 小 图 标 、 小 序号 、 小 字 、 
小 手绘 也 许 当 我 们 浏览 一 个 页 面 时 很 难关 注 到 它们 ， 但 这 些小 的 装饰 点 却 在 视 
党 潜意识 里 为 整体 页 面 的 易 用 性 、 舒 适 性 、 节 奏 感 和 亲切 度 默默 加 分 








一 、 小 图 标 


1. 图 标的 分 类 
图 标 是 指 对 操作 功能 或 对 事物 主题 的 图 形 表现 ， 在 网 页 设计 中 图 标 一 般 分 为 抽 像 和 具 像 两 类 。 
(1) 抽 像 的 行为 图 标 


这 一 类 是 府 释 计算 机 系统 操作 功能 的 图 标 ， 我 们 通常 称 之 为 ICO， 系 统 包括 PC 系统 和 手机 、 平 板 电脑 等 系统 ， 操 
le i 聊天 、 游 
戏 等 相关 的 应 用 系统 操作 ， 这 类 图 标 通常 


是 对 行为 和 状态 的 概括 ， 表 现 的 内 容 相对 人 ao WoW ， 


抽象 ， 所 以 有 一 套 相对 标准 的 图 标 规范 ， 
如 放大 、 缩小、 锁定 、 收 邮件 、 登 录用 户 等 ， 到 me 
经 过 长 期 的 操作 培养 ， 用 户 可 以 逐渐 掌握 

并 快速 识别 。 





(2) 具 像 的 物品 图 标 


这 一 类 是 描 述 具 体 事 物 的 图 标 ， 这 类 图 标 通 常 根据 描述 的 内 容 而 定 ， 表 现 上 相对 抽象 图 标 比较 容易 识别 ， 所 以 没有 
统一 的 规范 ， ee 已 通 音 是 一 些 现实 中 的 奖励 物品 或 是 游戏 里 的 道具 图 标 等 。 


HU 引 二 二 列 寺 5U 10 民 合生 14 对 全 对 时 2Y yay 

1 WT 
0 0 辐 yy 国外 @ 必 Cp 本 ep 多 号 
下 至 BeHr i i 2 EE ee 1 -i zl We | 4 和 二 三 下 | 而 科 汪 如 200.000 LP 十 于 但 开 415 到 7 有) 200.000 LP 政司 三 人 WW AEME 
te ALL (1 区 } 六 A 4 er {于 到 ) (5 让} 于 | 了 区 本 (至 a0104] (11 寻 | 


7| pal 和 7 时 7| | 7| 时 7| 7 7| es7| pe 7| 


2. 使 用 图 标的 好 处 
(1) 方便 快速 浏览 


文字 本 是 视 涡 语言 的 二 次 翻译 ， 而 图 形 则 是 视 沉 的 直译 ， 所 以 扫 拉 图标 目 然 比 扫 摘 文字 显得 更 加 轻松 。 Ra 
可 以 直接 通过 扫 摘 图 标 来 获取 大 致 的 信息 ， 另 一 万 面 也 可 以 所 见 即 所 得 地 进行 步 又 的 操作 。 不 论 是 浏览 还 是 交互 操作 都 
更 加 万 便 。 
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(2) 简化 文字 说 明 


对 于 单 用 的 功能 或 者 主题 图 标 可 以 为 我 们 收纳 或 省 去 一 定量 的 文字 说 明 ， 让 排版 的 目 由 度 更 高 ， 和 版 面 视 部 更 直观 上 
档次 。 


(3) 增强 版 块 节奏 感 和 舒适 度 
图 形 和 文字 的 搭配 可 以 降低 阅读 的 疲劳 感 ， 也 增强 了 图 文 结合 的 设计 节奏 感 。 


REBISTER ENTER DAILY COMMUTE COMMUTE OPTIONS RULES 


CLEAN AR 
en 


CLEAN AIR COMMUTE GHALLENGE 


|] 


RIDE CATS CARPOOL VANPDOL WALK TELECOMMUTE 


ARE YOU UP FOR THE GHALLENGE? 


i 


公共 交通 、 目 行车 、 拼 车 、 班 车 、 步 行 、 远 程 办 公 ， 这 六 个 图 标 直 接点 明了 页 面 的 主题 
是 一 个 净化 空气 的 环保 专题 ， 这 里 用 图 标 展示 了 推荐 的 六 种 不 同 出 行 方式 。 i 
观 醒 目 并 且 有 趣 ， 通 过 扫描 图 片 蓄 能 获得 大 意 ， 交 互 操 作 也 更 加 直接 方便 。 


“a 
Ed 


Share your Food Sense 


Cl f wr mryeeor roe srry rantrihrtn 
SUuDbmit your favorite recipes, Decome a cont itor, Or Qet int 


> 
Fa | 
rec ,; become a co butor, or get interviewed. 2 一 
Me FF , 
l zx S 起 wy 
a 
- phorto by Clare Barboz# 








上 Subscribe 
一 个 食物 制作 分 享 的 网 站 ， 页 面 的 大 视 竞 很 简洁 ， 而 画面 中 的 几 处 手绘 则 是 这 个 页 面 的 


是 ， 手 给 让 人 联想 到 手 作 七 不 同 于 流程 化 的 工业 产品 ， 手绘 的 表达 让 它 更 具 个 性 和 亲和力 ， 
有 了 和 杀 目 动手 的 感受 。 
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designed with robust features that won't be obsolete 
o of with 


our business, be mobile-ready, and have a 
CK-$0 t [| President would trus? Need all of this yesterday? 
We don't think that’s too much to ask 


Launch Kit is the quickest way to get your brand online and make it count. We've streamlined the web design 
process to cut overhead costs without sacrificing quality, We're changing the way people think about designing 
websites. 


Send Me More Info 





在 看 到 这 个 页 面 时 ， 我 们 不 由 有 自主 地 殊 注 意 到 了 视 党 中 心 的 四 个 图 标 ， 如 果 没有 这 四 个 图 标 仪 是 文字 表达 的 话 ， 相 
言 画面 的 鹃 引力 融会 减弱 许多 ， 这 四 个 图 标 配 以 计算 公式 的 大 意 是 : 产品 专业 性 = 专业 的 网 络 顾问 + 快速 的 原型 制造 + 
优秀 的 设计 师 。 每 个 图 标 下 万 ， 通 过 鼠标 触 友 匹配 的 图 标 文字 介绍 ， 让 信息 和 交互 形式 相互 配合 ， 既 呈现 了 更 详尽 的 内 
容 也 做 到 了 精简 的 收纳 。 在 图 片 与 文字 排版 的 节奏 感 上 也 表现 展 好 。 小 图 标的 妆 饰 起 到 了 不 小 的 作用 。 


treehouse 
a 


四 Web Design 


What do you want 


to learn today? Web Dovelopment 


i0S Development 





How it works 


Watch videos and take quizzes 


Uniock badges 
J 各 


这 里 用 蓝 、 红 、 绿 三 种 颜色 设 定 了 三 个 不 同 的 功能 图 标 ， 让 灰色 调 的 页 面 顿 时 响亮 了 起 来 。 显 示 器 中 的 魔术 棒 代表 
了 视 儿 设计、 齿轮 代 表 了 系统 开 友 、 手 机 代表 了 手机 系统 的 开 友 。 图标 和 解释 文字 的 排版 节 春 感 很 音 ,图 标点 之 了 整体 视 帝 。 
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mmIVNALIVWIMIEWwET 


演 己 | 口 引 了 由 之 0 ol | 到 伟 全 内 | 
至 引导 车 0| 册 三 | 
2012 电 唱和 雪 引 导 型 起 7 上 | 各 噶 015101, EA SPORTS FIFA ONLINE 2 引导 项 侣 不 和 | 芒 0 到 芋 合 他 证 号 崇 填 女 基 癌 短 昌 | 刻 合 UC} 


712t: 2012.9.25~2012.10.8 
出 号 : 僚 忌 了 31 章 是 0| 基 下 到 0IXIOl 型 今 由 和 从 | 吧 必 要 剂 刘 0HOI 蝇 号 吓 型 吓 蜡 三 到 UCH 音 甘 全 个 量 朝 字 人 | 型 地 7H0HO| 留 封 导 2| 7 于 ZK 








UY 对 会 齐 个 上 到 号 2 号 会 旬 丘 QY 
铀 / 可 名 0 
型 合 对 习 91 。 人 只 明 到 严 叶 了 2 号。 200,000 LP 。。 吴 到 介 (15371) 200.000LP 归 到 Ol 三 人 | 嫩 。 2010' 人 I 到 着 鲍 28l 字 苦 车 7| 
(179) (如 到 ) (5 刻 ) 如 4 好 区 (30 忒 ) (三 2jO101) (1 登 ) 
蜡 7| 时 7| 晶 ?| 时 7| 虹 7| 蜡 ?| 蚤 ?| 





吓人 起 叶 可 


0| 基 丘 | 对 要 到 到 7| 耻 车 8t 壳 全 5 从 |84 号 吓人 010| 层 全 三 对 UCH 


U2| 香雪 到 个 3 蜡 理 雪 5 昏 全 对 7 革 便 和 10 对 会 对 14 蜡 看 妇 


00 外 和 末 和 总 国 和 妃 


W 蝇 合 下 站 三 。 到 到 是 如 NS 如 201T7 lIE 1BEN0IMH EE 全 凤 前 骂 
(到 基 ) (1 对 ) (10 首 ALL (1 对 ) (108|) ?HE Frirrr] 


性 ?1 时 71 民 7| 乔 7| 苦 7| 


这 里 的 图 标 是 游戏 物品 的 展示 ， 融 悉 游 戏 的 玩家 查看 物品 更 加 方便 明 观 。 大 图 片 、 小 文字 、 操 作 按 钮 ， 三 者 结合 流畅 ， 
条 理 清晰 ， 视觉 节奏 感 展 好 。 


天 包 人 | 廿 他 时 对 人 UI 人 0| 革 让 01B 引 IS1 


01 居多 0 人 | 在外 车 02 区 0 虽 7 由 更 03 到 于 训 E 节 对 


PL | 


0 居中 对 7 听 9 加 丸 二 0| NUS? 


/ 


pe ~、 
1 


下 好 OF 子 师 凯 对 命中 三 到 人 E 慰 导 Lol 010PP1， 蝇 如 站 MVP 园 01 人 号 三 对 51 


在 这 个 网 页 里 ， 既 有 通用 的 ICO 也 有 实物 的 小 图 标 ， 用 ICO 通常 是 解释 操作 或 者 事件 ， 所 以 表现 上 更 加 简洁 抽象 ， 
实物 的 小 图 标 相 对 更 加 县 体 ， 表现 也 相对 有 具 像 。 不 同 的 表现 形式 也 贴 合 了 不 同 的 内 容 。 
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二 、 小 序号 


序号 束 是 指 顺序 的 号 码 ,在 文字 衣 橱 中 我 们 也 有 提 及 “， 序 号 通 音 是 阿拉 人 数字 1、2、3、4.…… ,或 者 是 中 文 一 、 二 、 三 、 
四 等 ， 由 于 字体 和 功能 的 独特 性 ， 不 论 在 字形 还 是 位 置 都 与 正文 有 所 区 别 。 所 以 序 号 的 设计 可 以 增强 信息 排版 的 节奏 感 。 
另外 由 于 它 功 能 的 独特 性 ， 设 计 中 经 党 将 其 做 为 一 个 小 图 标 来 设计 ， 表 现形 式 也 多 种 多 样 ， 在 满足 分 类 分 段 功 能 的 同时 
又 增强 了 整体 的 趣味 性 和 设计 感 。 下 面 我 们 来 具体 分 析 一 下 序号 的 四 个 功效 。 


1. 阅 读 顺 序 引 导 


基于 最 原始 的 功能 需求 ,序号 具有 5| 导 阅读 顺序 的 功能 ， 企 它 的 牵引 下 ,我们 的 排版 可 以 更 加 灵活 ， 不 爱 环境 的 限制 ， 
因为 序号 最 终 会 帮助 我 们 在 混乱 的 形式 中 寻找 到 阅读 的 轨迹 。 下 面 我 们 针对 几 种 排版 布局 来 看 看 序号 企 其 中 的 作用 。 


(1) 布局 无 规律 的 排版 


视觉 的 美感 通常 起 于 它 的 功能 性 ， 
引导 阅读 和 g 落 标记 是 序号 很 重要 的 
功能 


引导 阅读 是 序号 的 本 职工 作 ， 特别 
是 当 我 们 的 排版 规律 不 那么 明显 时 ， 这 
种 相对 无 规律 的 可 遵循 的 信息 排 布 ， 序 
列 号 和 曲线 的 指引 为 阅读 起 到 了 很 强 的 
虽 5| 作 用 。 





(2) 综合 排版 、 顺 序 不 明 的 排版 


先 左 右 后 上 下 ， 还 是 先 上 下 后 左右 ? 如 果 没 有 序号 的 指引 ， 可 能 我 们 需要 化 更 大 的 气力 来 解决 阅读 顺序 的 问题 。 添 
加 了 序号 ， 我 们 很 明确 地 看 出 ， 左 下 图 是 先 左 右 后 上 下 、 ee 的 阅读 顺序 。 


0 型 中 到 和 | 量 o18 才 oj Ne. 到 olA7Rz7 和 从 冉 
EARL 
olWEol 者 os! 马 三 aolE 让 loiz 500 2 et I 
tI 所 oflLI0l84 tI 生子 到 OA 100081 们 全 三民 UICE a mi 和 
Hsold500Wd 汉 
ee 十 导 oj10008| 和 
人 ee ® a 


到 包 对 0 则 HE 引 届 对 对 
03 OE Oden Folsp| 


| LU si 岂 恒 列 天 1 到 对 ee + | 
是 同 合 训 E 相 Di 节 革 品 缚 盏 本 社 姑 Ud. 


OHE}XHHISI 7| 


OPS 7RHT11Y 2 30Y) BoP! PONS Hy OIEla HIS2lols, 
[1 hr 于 对 对 中 了 0 全 个 以 合 LIC 
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2 .快速 阅读 
bs 1、2、3 如 同 地 图 坐标 一 样 ， 我 们 很 容易 通过 扫 
EN de 描 找到 与 之 对 应 的 主 标题 并 快速 获得 关键 信息 

2011" 志 合 昌 人 9 到 到 弄 寺 IE| 太 下 过 名 可 寺中 5 oh 


GO 





1、2、3 的 标识 也 可 以 如 同 记号 一 般 让 用 户 在 大 
量 的 文字 和 信息 阅读 过 程 中 拥有 停顿 休息 ， 并 从 这 
个 记忆 后继 续 出 友 。 标 记 点 的 设 定 ， 也 可 以 减轻 信 
息 阅 读 芍 避 


oO 








01 型 出 至 时 出 召 吉 到 吕 2! 


02 ot0| 开 Ca a 寺 副 朱 作 81 


03 0| 号 直 KK| 外 三 010|C| 早 对 8! 融和 IS! 





亿 sutra KISA Sarsass I~I~I~l 





这 个 页 面 昌 然 排 版 工整 ， 但 是 内 容 形式 多 样 ， 
这 个 页 面 如 果 没 有 0 1、0 2、0 3 的 指引 ， 用 户 
在 阅读 时 一 定 会 多 犹豫 几 秒 来 梳理 关系 。 


HPO HN 全 卉 和 cH 
01. 和 到 ia 但 二 


Q1. zy [ep 


[0| 呈 各 


BATTLERIELD 
| 


图 图 六， 国 -…” 邮 … 


| | 


型 出 儒 量 划 7| > 他 和 TR 对 幸 必 号 呈 妈 个 71 > 


UP 


03 .ul 时 昌 E 2alelo 人 但 州 ? 肥 量 aiEMLIe? 


区 二 
JS 


i | 0 山王 tl717| > 
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3. 增 强 节 奏 感 
放大 标题 中 的 1、2、3， 使 其 与 详细 说 明文 字形 成 了 明显 的 大 小 对 比 ， 在 排版 形式 上 增强 了 信息 展示 的 节奏 感 。 


01 02 03 


内 容 标题 一 ”内容 慰 题 二 ”内 容 标题 三 
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4. 图 片 装饰 效果 


由 于 序号 的 特殊 功能 ,设计 上 较 其 他 内 容 也 有 更 强 的 独立 性 ,所 以 我 们 可 以 根据 主题 内 9 
让 它 成 为 页 面 中 的 委 饰 纽扣 ， 增 加 页 面 的 小 看 点 ， 也 让 页 面 细节 更 精彩 。 
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| 
三 、 小 字 
小 字 是 因为 大 字 而 存在 的 。 在 设计 上 ， 它 利用 小 的 点 缀 产生 与 大 字 之 间 的 节奏 感 ， 并 对 大 形式 进行 修补 ; 在 功能 


小 字 是 文章 的 补充 ， 也 可 以 说 是 属于 锦上添花 的 类 型 ， 它 可 以 是 中 文 也 可 以 是 英文 ， 通 常 表现 为 一 段 小 字 ,或 者 是 一 两 
个 小 单词。 


DECORATION 


小 字 好 用 


QUICKLY MAKE THE TEXT MORE RHYTHMICAL 





小 字 的 四 个 好 处 : 
增强 节奏 感 : 大 字 小 字 ， 粗 磅 细 磅 的 配合 ， 让 文字 的 排版 设计 更 有 节奏 感 。 


增强 视 党 精度 : 正如 ”像素 "的 作用 ， 能 够 瞬间 让 用 户 感 到 拥有 较 高 精度 和 品质 感 的 错觉 ， 当 然 如 果 在 内 容 上 更 
加 项 酌 残 不 是 错 竞 啦 ! 这 里 这 的 是 讨 巧 的 好 办 法 ， 小 字 在 这 里 是 作为 细节 而 存在 的 ， 让 画面 的 细节 也 有 看 点 。 


空位 补 形 : 小 字 可 以 填补 排版 上 的 不 工整 或 者 因 设 计 和 需要 而 有 意 留 下 的 错位 。 


文章 补充 : 除了 沪 饰 的 作用 ， 小 字 当 然 也 需要 有 一 定 实 用 的 功效 。 它 可 以 作为 辅助 说 明 而 存在 ， 可 以 作为 副 标 


题 或 第 三 级 补充 标题 。 


小 字 使 用 的 注意 事项 和 讨 巧 办 法 : 
英文 小 字 注 意 拼写 的 准确 性 : 由 于 英文 的 国际 化 ， 英 文 小 字 在 加 强 排版 节奏 感 的 同时 也 可 以 给 整体 视 竞 市 来 一 
些 国际 范 儿 ， 昌 然 是 一 些 锦上添花 的 沪 饰 ， 但 拼写 的 准确 性 也 很 重要 。 如 果 目 和 喘 的 严 文 水 平和 翻译 软件 无 法 满 
足 准 确 性 ， 而 身边 又 没有 专业 的 英文 翻译 的 话 ， 可 以 有 两 个 办 法 : 一 是 将 翻译 的 内 容 集中 在 一 两 个 单词 上 ， 这 
样 出 错 率 会 比较 低 ; 二 是 将 长 篇 的 文字 缩小 到 不 可 识别 汽 围 内 ， 让 文字 主要 起 节奏 修饰 的 作用 。 


中 文 小 字 注 意 中 文 的 识别 度 : 小 字 用 于 正文 ， 主 要 针对 那些 文字 体 量 较 多 的 内 容 。 可 以 通过 内 容 小 字 、 标 题 
大 字 表 现 文 字 的 节奏 感 ， 这 类 型 的 小 字 是 有 比较 强 的 功能 性 的 ， 所 以 一 定 要 在 可 识别 的 范围 内 ， 最 小 不 要 低 


于 12 号 字 。 
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1. 英 文 单词 装饰 
国际 范 儿 


le ， 最 时 尚好 坏 的 将 车 网 游 天 人 1 新 | 六 S ; TT 
级 % 壬 . as 前 页 | 基 戏 下 载 | 导 译 局 “论坛 ”快速 充 值 开通 紫外 。 | 0 更 信 本 5 





一 个 中 文 页 面 ， 但 整体 视 完 却 充 满 了 国际 范 儿 ， 除 了 良好 的 设计 形式 感 ， 它 在 文字 大 小 和 字体 粗细 
的 节奏 把 握 上 也 有 很 好 的 控制 力 ， 严 文 小 字 的 使 用 给 整体 细 证 添加 了 几 分 视觉 的 看 点 。 


空位 填补 





KS 
看 了 
= 


个 设计 里 不 单 有 英文 单词 ， 人 在 主 SLOGAN 下 面 还 有 一 段 小 邓 瑞 文 。 虽然 识别 度 比较 弱 ， 但 为 视 帝 添加 
Ps 时 尚 的 氛围 。 也 比较 贴 合 飞 车 的 整体 视 完 倾 同 。 
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2. 中 文 小 字 装 饰 


从 SoaQ 炉 短 [ 全 城 扶 杰 棕 术 纺 放 ] 光 j 册 未 习 | 腾 讯 游戏 ,请 马上 和 警 录 候 的 游戏 人 生 | 入 讯 游戏 
SG: ;种 种 花 收 收 爱 疙 次 8 末 到 ,请 马上 牌 录 履 的 游戏 人 生 | 租 讯 游戏 


到 家 论坛 。 分 到 + [人 2 





(@) Bn 


Se DAUE Or 








这 是 一 段 英文 大 字 与 中 文 小 字 的 配合 。 这 里 的 小 字 是 游戏 故事 的 开始 ， 重 要 等 级 相对 较 低 ， 但 在 妆 饰 的 意义 上 也 尽 
量 保证 了 文字 的 可 识别 度 。 


个 AR ri 谢 rnaRot ， 订 上 当 好 引 的 及 夏 人生 着 


| 六 于 We LOVENNS 3 ES 4 
IS INTEGRAL 


fy 
人 什么 是 灵 值 ? 
迎 = 2 






WHAT 


Ebel OL 3NOD 1jA 








虽然 这 个 页 面 里 没有 图 形 和 质感 的 表现 ， 但 是 文字 的 节奏 感 让 整体 视 萝 简洁 大 气 。 这 里 小 字 的 字号 也 用 了 12 号 字 保 
证 了 识别 性 ， 标 题 和 大 标题 字号 层次 明晰 ， 阅 读 性 好 。 
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四 、 小 手绘 


手绘 可 以 消除 一 些 工 业 化 的 冰冷 感 党 ， 在 许多 活动 专题 中 ， 为 了 拟 近 与 用 户 的 距离 ， 产 生 一 定 的 杀 切 感 ， 许 多 不 同 
性 质 的 题材 都 会 使 用 或 点 缀 一 些 手 绘 装饰 。 它 包括 文字 手绘 、 人 物 手 绘 、 图 形 标识 手绘 等 等 ， 我 们 一 起 来 看 看 。 


1 .文字 手绘 
一 些 手 绘 风 格 的 排版 设计 能 够 让 内 容 表 达 更 加 亲近 ， 拉 近 设 计 者 和 浏览 者 的 距离 ， 就 像 朋 友 间 面对面 的 交流 一 般 。 


oF 里 剖 分 地 


BE 引入 8e7P| 党 





2. 人 物 手 绘 和 有 爱 化 表现 


人 物 的 有 爱 化 是 指 利用 人 物 夸张 的 表现 和 动态 ， 可 以 拉 近 观 者 和 产品 之 间 的 距离 ， 通 党 我 们 会 使 用 手绘 为 其 添加 一 
些小 表情 ， 或 者 将 其 泻 染 成 真人 漫 田 。 当 然 素 材 本 身 的 表情 姿势 给 人 的 故事 感受 也 很 重要 。 
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3. 装 饰 对 话 手绘 


小 气泡 也 是 常用 的 有 爱 小 提示 ， 它 可 以 是 正文 信息 的 补充 ， 也 可 以 是 专题 气氛 的 小 表述 。 正 如 左下 图 ， 从 上 到 下 的 
三 个 小 气泡 分 别 的 意思 是 ' 嘿 嘿 “、 我 们 再 努力 点 `“ 我 们 还 有 取胜 的 可 能 ”对 于 正文 的 内 容 来 这 可 能 属于 可 有 可 无 的 信息 ， 
但 却 为 整体 的 气氛 表达 增添 了 几 分 情趣 。 








呈 半 9 对 ofol 到 人 县 z 
下 型 全 1248lol HE 


于 7 人 二 王公 下 7 到 
交合 放 代 各 世 划 让 = 





时 后 婵 中 2| 车 合计 


9| 别 0 





4. 内 容 标 识 手 绘 
大 上 段 的 文字 通常 会 有 一 些 关 键 的 字眼 ,我 们 可 以 选择 日 常 阅读 时 对 重点 标识 的 方式 进行 设计 ,不 规则 的 下 划 线 、 箭 > 
田 冉 、 打 红星 等 等 ， 这 些小 涂 牙 的 使 用 也 能 让 我 们 的 页 面 充 满 小 精彩 。 


ArcheAge 
官方 直通 车 





虹 时 福 问 诬 作 有 渗 式 ， 可 以 总 击 QQ& 几 过 行 了 解 。 3 


Shoot!l don't have a webcam. 
1 
s play! 人 Show me what fm missingl 


-> 


我 的 反 间 问答 失 索 


让 TREE Er cis A ， 9 要 楼 宋 的 问题 QO 
YP ty Sh Ee 和 还 
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Pa 日 
剑 灵 新 年 专题 
下 面 我 们 拿 一 个 几 近 成 稿 的 页 面 做 一 些 细节 上 的 添加 和 调整 。 让 这 些小 图 标 、 
做 K 小 序号 、 小 有 爱 在 细节 对 页 面 进行 装饰 ， 体 会 细 处 的 别 样 精彩 . 


医 攻 避 剑 灵 新 年 专题 


在 确定 大 布局 之 后 ， 我 们 可 以 对 一 些 内 容 细 蔬 进 行 调整 细 化 ， 拉 开 文 字 节 奏 ， 为 一 些 特 定 的 音 用 功能 配置 图 标 ， 加 
入 一 些小 有 爱 的 体验 ， 让 用 户 阅读 起 来 更 快捷 ， 使 用 更 愉快 。 
(全 多 入 03 孝 欢 j 末 到 荐 讯 消 戏 ， 请 马上 澡 录 你 的 游戏 人 生 | 芽 讯 游戏 


pip Rto lA aol MI 
迎新 春 庆 祝 福 拿 灵 值 





1. 通 用 的 小 1CO 


用 显示 器 图 标 表 现 电 脑 壁纸 ， 用 手机 图 标 表示 手机 壁纸 ， 图 标 让 信息 呈现 更 加 直接 。 








电脑 中 S20z1050911440x3000” | 1386x7680 | 1024x768 4 mm 1366x7680 


手机 iPhone 5 | iPhone 4s/4/Ses Android (480x800) | Android (320x2f0 ES 图 iPhone 5 | iPhone 4s/4/Ses 





2. 小 字 的 节奏 感 


2013 人 2 器 COMING! 2013 全 | 灵 f 
Ea 





迎新 奉送 闹 关 合 灵 值 。 ;x COMMINGC 


利用 大 小 字 的 对 比 ， 让 整体 节奏 感 更 强 。 首 先 放大 主 SLOGAN“， 突 出 COMING ， 将 "迎新 春 、 送 祝福 、 拿 灵 值 "做 为 





二 级 标题 ， 缩 小 字号 ， 利 用 黄 搬 样式 ， 拉 开 二 者 的 表现 ， 然 后 加 入 HAPPY NEW YEAR 做 为 小 字 闻 饰 ， 三 层 太 奏 展 好 舒适 。 
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3. 有 爱 的 小 提示 





GREETHSG 亡 直 RD 








当 鼠 标 经 过 圆 形 按钮 时 ， 弹 出 手写 体 的 文字 ， 内 容 轻 松 杀 切 :“ 听 况 2.14 灵 值 有 双 售 喔 !" 束 像 好 朋友 在 耳 边 悄悄 告 
诉 你 一 般 ， 手 写 体 的 配合 也 是 合适 的 ， 这 种 小 提示 不 像 正 文 SLOG 那么 官方 ( 如 " 享 祝 福 ， 送 灵 值 " 之 类 的 ) ， 形 式 和 语 
言 更 加 生活 化 ， 也 给 了 画面 和 体验 增添 了 一 些小 情趣 。 





和 页面 展示 





这 些小 图 标 和 小 有 爱 的 加 入 让 网 页 在 细 处 也 有 精彩 ， 细 节 的 完美 表现 ， 也 能 让 用 户 感受 到 体验 的 愉快 和 有 爱 。 
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附录 A 
一 个 视觉 设计 师 的 职业 世界 观 一 一 关于 商业 视觉 设计 师 的 自我 定位 


附录 B 
网 站 建设 新 元 年 的 设计 趋势 


附录 C 
设计 中 的 "好 有 爱 ' 
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A 一 个 视觉 设计 师 的 职业 世界 观 
es ® 2 YS eg fe 
一 一 关于 商业 视觉 设计 师 的 自我 定位 
做 为 一 个 设计 师 ， 我 们 并 不 需要 成 为 一 个 策划 人 ， 但 如 果 我 们 了 解 我 们 所 经 历 
| | 的 这 些 事 ， 它 们 是 从 哪里 来 到 哪里 去 ， 或 许 我 们 能 够 在 自己 这 个 环节 上 做 得 更 好 。 
这 便 是 本 文 要 说 的 一 个 视觉 设计 师 的 基本 职业 世界 观 。 





这 篇 文 草 无 关乎 视觉 美 肝 ， 无 关乎 拉 法 表现 ， 它 不 能 让 我 们 的 作品 变 得 漂 膏 ， 却 能 让 我 们 的 设计 精准 有 效 。 作 为 商 
业 团队 中 的 一 个 成 员 ， 在 完成 一 件 商 业 作品 时 ， 明 确 目 己 和 产品 的 定位 是 十 分 关键 的 ， 它 直接 影响 到 设计 作品 的 准确 性 。 
只 有 准确 了 解 了 这 两 个 定位 ， 我 们 才能 繁杂 的 职业 中 认识 人 群 中 的 自己 ， 并 让 我 们 的 作品 正 真 为 产品 提供 帮助 。 


一 、 自 我 定位 


L 


1. 我 是 谁 ? 

首先 是 目 我 是 位。 我 是 谁 ， 我 是 来 做 什么 的 呢 ?这 两 个 问题 直接 影响 到 
我 们 之 后 的 行为 目标 ， 目 标的 指向 越 明 确 ， 我 们 的 行为 才 越 有 效 。 如 果 将 网 
页 设计 师 的 成 长 分 为 三 个 阶段 。 从 第 一 次 接触 设计 工作 到 逐渐 开始 理解 设计 、 
理解 产品 ,并 最 终 成 为 一 个 相对 成 熟 的 网 页 设计 师 ， 我们 可 以 如 何 定义 这 三 
个 过 程 中 的 目 己 。 





第 一 阶段 :我 是 一 个 艺术 设计 者 


在 从 事 设 计 这 个 职业 前 ， 我 们 也 许 在 学 校 都 受过 正规 或 非 正 规 的 平面 设 
计 和 艺术 理论 的 训练 。 答 到 进入 工作 岗位 后 ， 我 们 都 急切 希望 能 够 展现 目 己 
的 特点 ， 并 将 先前 之 所 学 所 见 应 用 于 工作 中 并 证 明 自 己 。 所 以 许多 刚 入 职 的 
设计 师 ， 通常 本 着 上 自我 证 明 的 目标 来 从 事 手 上 的 工作 ， 希望 能 通过 良好 的 视 
元 表现 来 证 明 目 己 的 工作 能 力 。 然 而 广义 的 艺术 理论 及 视觉 表现 与 狭义 的 独 
特 商 品 视 党 包 浅 并 不 太 可 能 恰好 合 担 ， 也 许 我 们 展示 了 艺术 性 的 视 沈 ， 但 却 
与 产品 坚 无 天 系 。 





第 二 阶段 : 我 是 一 个 翻译 者 


在 无 数 次 的 飞机 稿 过 后 ,我 们 开始 思考 ,并 希望 能 做 一 些 真 正 有 效 的 东西 。 
我 们 开始 试图 理解 文案 信息 ， 并 通过 图 形 将 信息 翻译 出 来 。 这 时 候 的 我 们 认 
为 目 己 是 一 个 产品 信息 的 视 竞 翻译 者 。 然 而 文案 的 翻译 正如 机 械 的 翻译 软件 
一 般 ， 它 是 生硬 的 、 不 易 懂 的 、 不 够 人 性 的 。 


第 三 阶段 :我 是 一 个 传达 者 


渐渐 的 我 们 发 现 ,如 果 只 将 视角 限定 在 眼前 的 几 个 信息 文字 上 是 不 够 的 ， 
我 们 必须 结合 语 境 对 它 进行 翻译 ， 也 就 是 我 们 必须 对 产品 、 产 品 周期 、 产 品 
营销 等 多 纬度 的 产品 处 境 有 所 了 解 ， 才 能 真正 准确 地 传达 出 产品 的 话语 。 这 
3 三 S YE 生生 。 时 候 我 们 不 再 是 机 械 的 翻译 软件 ， 而 成 为 一 个 真正 的 通过 视觉 去 传达 产品 话 
语 的 人 。 我 们 是 鲜 活 的 、 人 性 的 用 图 像 语言 去 传达 产品 信息 的 视觉 传达 设计 师 。 
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2. 他 是 谁 ? 


他 ， 


们 是 谁 。 





Ph 


媒体 人 产品 经 理 






项 目 经 理 下 


EP 


开发 商 


在 不 同 的 产品 、 不 同 的 规模 、 不 同 的 运 言 模式 下 ， 他 们 在 组 织 架 构 上 有 一 定 的 差异 。 残 腾讯 现 阶段 的 游戏 产品 运 言 模 
块 而 言 ， 与 设计 师 接触 最 多 的 人 有 : 产品 经 理 、 项 目 经 理 、 重 构 师 、 动 画师 、 程 序 员 、CP、 开 妈 商 、 制 作 人 等 等 ， 而 他 们 
的 主要 工作 是 什么 ?他们 与 设计 师 的 关系 又 是 怎么 样 的 ? 将 这 些 天 系 梳理 清晰 我 们 才能 更 好 地 合作 并 合理 的 利用 资源 。 


下 


制作 人 


产品 核心 概念 市 场 推广 策略 





| Th 
产品 经 理 项 目 经 理 


产品 资料 细 化 、 活 动 策划 执行 合作 、 公 关 、 调 研 、 市 场 推广 执行 





我 们 在 这 里 @ 


| | | | 


视觉 设计 师 动画 设计 师 重 构 师 程序 员 软件 公关 执行 游戏 开发 


产品 视觉 风格 定位 、 产 品 资料 落地 、 概 念 视觉 化 、 活 动 功能 化 实现 
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形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 


从 产品 襄 销 的 角度 来 划分 的 话 ， 可 以 分 为 产品 和 市 场 两 个 万 向 ， 产 品 ud , 市 场 项 目 经 
理 刘 从 市 场 角度 树立 产品 的 品牌 形 像 ， 增 强 产 品 市 场 曝光 率 和 产品 的 美誉 度 。 举 个 例子 ， 假设， 我 们 的 产品 是 一 道 红 烧 
疗 子 ， 那 么 产品 经 理 负责 的 是 菜品 本 身 的 推广 ， 比如， 这 个 谣 子 的 选材 怎么 怎么 讲究 ， 辅料 怎么 怎么 地 道 ， 厨 师 的 手 忆 
i 而 项 目 经 理 则 是 从 市 场 价值 观 出 友 给 受众 正面 的 品牌 感受 ,比如 吃 了 这 红烧 谣 子 ， 反 肤 日 了 ,牙齿 好 了 ， 

精 昼 头 足 了 ， 夫妻 天 系 也 合 肤 了 等 等 。 当 然 这 是 个 玩笑 ， 不 过 天 品 经 理 和 品牌 经 理 的 着 力 点 基本 上 残 是 这 样 分 类 的 。 而 
我 们 在 制作 不 同类 型 的 专题 时 ， 也 需要 有 同样 明确 的 目标 ， 二 者 概念 不 能 混淆 。 


说 完了 产品 经 理 和 品牌 经 理 的 工作 ， 我 们 从 服务 和 技术 支持 的 角度 出 友 ， 可 以 将 其 分 为 决策 层 、 策 划 层 、 实 现 层 。 
决策 层 包括 产品 的 制作 人 和 市 场 总 经 理 ， 他 们 决定 了 产品 的 研 上 友 万 向 和 市 场 定 位 。 产 品 经 理 和 项 目 经 理 则 是 将 这 种 万 回 
和 定位 落实 成 具体 的 产品 表现 和 膏 销 事件 策划 ， 这 是 策划 层 。 最 后 由 设计 师 、 动 画师 、 重 构 师 、 程 序 员 等 组 成 的 技术 层 
队伍 将 其 转换 成 用 户 接触 和 感知 的 产品 和 活动 ， 即 实现 层 。 在 这 里 ， 设 计 师 用 理性 的 思考 和 亏 术 的 大 脑 ， 在 产品 的 不 同 
阶段 从 不 同 的 万 向 用 不 同 的 万 式 为 用 户 传 达 有 趣 的 、 可 吸收 、 可 消化 的 产品 信息 。 


3. 我 要 做 什么 ? 


从 上 述 的 组 织 架 构 可 以 友 现 我 们 是 协助 和 帮助 产品 经 理 与 项 目 经 理 将 产品 信息 和 市 场 膏 销 活 动 进一步 视 党 落实 和 拉 
术 实 现 的 。 那 天 于 产品 和 市 场 的 具体 工作 有 哪些 ， 而 哪些 部 分 需要 我 们 进行 视觉 化 的 表现 与 传达 呢 ? 


下 面 我 们 从 产品 营销 的 角度 出 发 ， 将 工作 简要 归纳 成 一 个 核心 、 两 个 
基本 方向 。 核 心 是 产品 的 核心 定位 ， 它 包括 产品 定位 和 市 场 定位 。 两 个 基 
我 要 7 本 方向 ， 一 是 基于 产品 本 身 的 产品 运 维 方向 ， 二 是 基于 市 场 推广 的 市 场 营 
销 方向 。 做 为 一 个 项 目的 专属 设计 师 ， 耕 TA 能 够 由 始 至 终 的 跟随 产品 的 发 
展 ， 那 么 TA 将 接触 到 哪些 具体 的 工作 呢 ? 


核心 定位 


核心 定位 简单 地 这 ， 也 残 是 定义 产品 在 大 家 眼中 的 样子 。 它 决定 着 你 
的 严 品 以 什么 卖 相 、 用 什么 万 式 、 让 什么 样 的 人 、 付 出 多 少 价格 购买 它 。 
也 便 是 我 们 通常 所 说 的 产品 的 特色 卖点 、 面 向 对 象 、 消 费 模式 等 。 


产品 的 核心 定位 分 为 两 部 分 : 产品 定位 和 市 场 定 位 。 天 品目 身 的 定位 
在 产品 研 友 初期 殊 有 了 ， 它 与 产品 设计 师 有 3 但 与 以 服 





务 产品 营销 为 主 的 网 页 设计 的 关系 并 不 密切 。 另 一 部 分 是 产品 的 市 场 定位 ， 
它 通常 是 在 产品 投入 市 场 运作 时 进行 定义 的 。 这 时 制作 人 、 市 场 经 理 人 、 
ea eben Se 设计 总 监 、 产 品 经 理 、 项 目 经 理 、 视 觉 设 计 师 可 能 都 
产品 更 新 成 长 2 1 市 场合 作 推广 会 不 定时 的 参与 讨论 和 研究 。 从 产品 包装 出 发 ， 作 为 
See reneerereeeern ” 视觉 设计 ， 我 们 的 主要 工作 有 哪些 ? 
产品 运 维 市 和 推广 
是 ”产品 风格 设 定 : 它 包括 主 色调 、 网 页 UI 风 


格 、 专 属 字体 的 定义 和 设计 。 


和 竞 品 的 市 场 差异 化 设 定 : 区 别 于 其 他 相近 产 
核心 定位  ) 品 的 视觉 风格 设 定 。 


产品 LOGO 设 计 : 代表 着 产品 的 主要 图 形 
标识 。 

产品 概念 站 设计 : 通过 图 片 、 文 字 、 视 频 动 
男 等 多 样 化 的 综合 形式 传达 产品 概念 。 
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附 录 





产品 运 维 
产品 运 维 是 围绕 产品 进行 的 运营 和 维护 ( 当然 这 里 所 指 的 运 维 是 在 产品 研发 完成 之 后 ) 。 它 主要 包括 产品 升级 更 新 
的 发 布 、 产 品 配套 资源 的 建设 、 营 销 活动 策划 、 信 息 落 地 及 各 平台 的 建设 。 那 么 ,参与 其 中 的 设计 师 需 要 进行 哪些 工作 呢 ? 
官网 制作 : 产品 形象 展示 和 信息 落地 的 官方 网 站 。 
活动 专题 : 它 的 功能 较 多 样 ， 包 括 推 资源 、 拉 收入 、 拉 用 户 、 调 查 测试 、 游 戏 平衡 等 
资源 包 : 壁纸 、 截 图 、 漫 画 等 与 游戏 直接 相关 的 资源 . 
广告 和 平面 海报 设计 : 线 上 和 线 下 的 平面 广告 设计 。 
各 平台 媒体 推广 视觉 规范 设 定 : 它 为 产品 的 平台 合作 和 延续 性 设计 制定 了 规范 。 使 产品 保持 整体 的 统一 性 。 
市 场 推广 
市 场 推广 包括 : 它 是 以 资源 互 换 为 主 的 各 类 产品 合作 、 平 台 合 作 、 泛 娱乐 合作 等 ， 它 通过 与 同类 别 产 品 或 理念 相近 
的 产品 合作 ， 产 生 强 强 联手 的 品牌 效应 ， 从 而 使 产品 被 更 广泛 的 用 户 认 知 并 赢得 良好 的 口碑 ， 达 到 品牌 建设 的 目的 。 以 
游戏 产品 举例 ， 产 品 合作 包括 同类 产品 和 非 同 类 产品 ， 即 可 以 是 游戏 类 的 也 可 以 是 食品 、 服 装 、 软 硬件 等 其 他 品类 的 ， 
只 需要 有 某 些 相通 的 产品 理念 关联 ， 便 可 以 产生 合作 的 可 能 。 平 台 合作 包括 网 络 媒体 和 线 下 实体 平台 ， 它 既 可 以 是 基于 
网 络 的 论坛 、 微 博 、 游 戏 频道 、 网 络 商城 等 平台 ， 也 可 以 是 线 下 生活 中 的 各 类 展会 、 网 吧 、 校 园 活动 等 。 对 市 场 的 工作 
有 了 一 定 了 解 后 ， 我 们 来 看 看 设计 师 在 市 场 方向 的 主要 工作 。 
媒体 平台 网 站 建设 : 合作 平台 的 网 站 通常 会 依照 产品 的 视觉 规范 进行 设计 ， 有 时 候 是 由 对 方 平台 的 设计 师 完成 
设计 。 所 以 拟定 并 遵守 视觉 规范 才能 保证 产品 在 各 个 平台 的 视觉 统一 性 。 
合作 活动 专题 : 由 于 涉及 到 两 种 品类 的 产品 的 合作 ， 专 题 的 视觉 表现 也 相对 综合 ， 一 方面 需要 保持 自己 产品 的 
点 ， 另 一 方面 也 要 顾及 到 合作 产品 的 特色 。 如 何 将 两 者 合 二 为 一 是 设计 的 难点 也 是 设计 的 创意 点 。 
展会 场馆 的 主 KV 设 计 : 这 个 主要 针对 一 些 实体 线 下 平台 的 合作 ， 它 包括 海报 的 设计 、 发 布 会 场馆 和 会 场 的 主 KV 
设计 。 
周边 设计 : 周边 是 产品 的 延伸 资源 ， 它 可 以 是 产品 合作 的 产物 ， 也 可 以 是 产品 资源 的 延伸 。 不 同类 型 的 周边 也 
可 能 由 相关 行业 的 供应 商 或 CP 进 行 设计 ， 但 做 为 产品 包装 的 主 设计 师 也 会 参与 到 周边 设计 中 来 。 





我 是 一 个 个 协助 产品 和 项 目 策划 便 通 过 视觉 表现 全 将 产品 信息 传递 给 用 户 的 个 传 话 人 ， 


我 是 谁 ? 他 们 是 谁 ， 需要 我 做 些 什么 ”了解 了 这 三 个 内 容 我 们 基本 上 对 目 身 的 处 境 有 了 一 定 的 了 解 。 光 统 地 这 ， 我 ” 
是 一 个 协助 产品 和 项 目 策划 通过 视觉 表现 将 产品 信息 传递 给 目标 用 尸 的 传 话 人 。 也 许 有 舍得 视觉 传 话 人 的 定义 是 人 否 降 
低 了 一 个 设计 师 的 地 位 和 影响 力 ， 但 在 团队 合作 的 关系 中 ， 每 个 人 都 把 握 和 衔接 着 工作 传递 中 不 可 或 缺 的 一 环 ， 能 够 放 
下 身段 并 真正 帮助 团队 ， 有 效 服 务 于 产品 的 设计 师 才 能 最 终 拥有 话语 权 和 影响 力 。 
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形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





I Ej 
m= 产 品 相关 
这 看 似 一 个 与 设计 师 无 关 的 世界 ， 它 既 没 有 色彩 结构 、 也 没有 潮流 风格 ， 但 它 却 关系 着 我 们 的 作品 是 否 有 效 。 


当然 做 为 一 个 设计 师 并 不 需要 对 产品 和 市 场 言 销 有 十 分 专业 的 了 解 但 到 设计 师 这 个 层面 上 我 们 还 是 需要 知道 几 点 。 
例如 ,产品 属于 什么 类 别 ， 我 们 需要 为 它 定 制 怎 么 样 一 套 包 沪 使 其 更 加 呈现 上 自己 的 个 性 ? 它 儿 岁 了 ，, 它 经 历 了 哪些 周期 ， 
发展 到 什么 阶段 ， 在 这 个 时 候 我 们 在 视觉 上 可 以 为 它 做 些 什 么 ?喜欢 它 的 会 是 哪些 人 ， 而 这 些 人 又 喜欢 怎么 样 的 视 沈 表 
现 ? 我 们 手 上 所 做 的 事情 属于 整体 高 销 的 整个 环节 ， 它 的 上 一 环节 和 下 一 环节 各 是 什么 ， 它 们 的 目标 和 愿景 是 什么 ?我 
们 如 何 做 好 承 上 局 下 的 工作 。 了 解 了 这 些 ， 我 们 的 设计 不 再 是 简单 的 以 视觉 去 评价 。 


1. 产 品 特点 及 类 别 


产品 的 特点 和 类 别 天 系 着 视 


[射击 类 ] [格斗 类 ] A 
强调 玩法 和 游戏 操作 强调 玩法 和 游戏 操作 区 包 委 的 第 一 件 外 衣 。 有 人 无 类 
穿越 火线 、 枪 神 纪 、CS 等 。。 地 下 城 与 勇士 、 龙 之 谷 、 第 九 大 陆 竺 穿 错 了 衣 赏 ， 有 人 吡 众 取 宠 相形 
见 拙 ， 有 人 行事 保守 ， 在 国际 化 、 
[联网 对 战 类 ] 大 众 化 的 庇佑 之 下 ， 虽 无 错误 却 
强调 对 抗 性 和 成 就 感 展示 不 了 个 性 ， 有 人 特 立 独行 另 
[大 型 角色 扮演 类 ] 英雄 联盟 、Dota、 魔 兽 和 争霸、 起 凡 竺 辟 吐 径 或 是 一 夜 成 名 或 是 身 败 名 
i 裂 .… 但 不 论 何 种 方式 ， 我 们 应 该 
尖 幻 西洲、 永恒 之 丧 等 a nice 更 加 了 解 产 品 才能 够 为 其 打造 出 
QQ 飞车 、QQ 炫 舞 、 街 头 篮球 、QQ 音 速 “”” 神 形 统一 的 视觉 外 衣 。 






[小 型 休闲 类 ] 
强调 趣味 性 
3366 小 游戏 


[其 他 类 ] 

其 他 平台 和 运营 模式 游戏 
开心 农场 、 三 国 杀 、QQ 斗 地 主 、 
4399 小 游戏 、 网 页 游戏 等 


2. 用 户 画 像 
用 户 葡 是 看 我 们 所 设计 的 视 


职业 _ 觉 的 人 ， 他 们 的 喜好 决定 了 我 们 
机 器 配置 的 视觉 表现 ， 而 这 种 喜好 通常 源 





于 他 们 的 年 龄 、 职 业 、 学 历 、 收 


入 入 


历 二。 


下 面 是 一 组 关于 不 同 游戏 类 


逆 戏 习惯 


年 龄 言 息 汇 道 别 用 户 的 调查 , 它 包括 年 龄 .学 历 
职业 、 收 入 、 游 戏 时 长 、 沉 迷 程 
度 等 等 。 


用 户 画 像 
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里 初中 及 以 下 





2000 1999 1998 1997 1996 1995 1994 1993 1992 1991 1990 1989 1988 1987 1986 1985 1984 1983 1982 1981 1980 1979 1978 1977 1976 1975 
eeweosweeaeg 在 ACG 


2000 1999 1998 1997 1996 1995 1994 1993 1992 1991 1990 1989 1988 1987 1986 1985 1984 1983 1982 1981 1980 1979 1978 1977 1976 1975 


年 龄 


【各 类 游戏 用 户 职业 分 布 】 
目 在 校 学 生 上 事业 单位 一 般 职员 日 企 业 /公司 管理 者 国企 业 /公司 一 般 职 员 力 个 体 户 /自由 职业 者 


57% 57% 


上 高 中 /中 专 。 。 日 大 专 。 。 四 本 科 





【各 类 游戏 用 户 月 收入 分 布 】 





【各 类 游戏 用 户 学 历 分 布 】 


目 硕 士 及 以 上 
44% 


38% 38% 


学 历 


"RPG 一 人 CT 一 ACO 








职业 


【各 类 型 游戏 用 户 的 游戏 时 长 】 
王 8 小 时 以 上 四 6~8 小 时 四 4~6 小 时 。 加 3~4 小 时 目 2~3 小 时 上 1~2 小 时 不 到 1 小 时 





游戏 时 长 


一 系 询 的 用 户 画 像 ， 除 了 对 产品 指 S 


首先 是 视觉 调 性 ， 视 竞 调 性 和 视觉 风格 不 同 ， 


侃 一 些 、 性 感 一 点 还 是 滑稽 一 些 ， 


目 必 不 可 少 





视 欧 风格 大 多 由 产品 决定 ， 拿 游戏 来 说 ，Q 版 的 还 是 写实 的 、 
还 是 铁血 的 ， 最 大 的 决定 权 在 于 产品 ， 但 视觉 调 性 则 是 在 风格 的 基础 上 进行 进一步 细 
不 同年 龄 、 不 同 职 业 和 性 格 的 用 户 对 它们 的 要 求 是 不 同 的 。 其 次 是 信息 呈现 ， 不 同 接 
受 能 力 的 用 户 对 每 次 所 能 接受 的 信息 量 、 信 息 类 型 以 及 信息 的 层次 是 不 同 的 ， 我 们 的 信息 呈 天 
化 都 由 目标 用 户 决定 。 第 三 是 行为 驱动 ， 不 同类 型 的 用 户 的 消费 观念 不 同 ， 从 而 导 


T T T T 
无 收入 500 元 以 下 501-1000 元 1001-1500 元 1501-2000 元 2001-3000 元 3001-5000 元 5001-8000 元 8000 元 以 上 





收入 


【游戏 在 生活 中 的 地 位 】 
加 很 重要 自 比 较 重要 


四 可 有 可 无 


36.7% 


24.9% 


导 和 帮助 外 ， 对 设计 师 的 作用 又 有 多 少 呢 ? 


魔幻 的 
分 的 ， 它 需要 严肃 一 点 还 是 需要 调 


见 需要 更 平民 化 还 是 更 国际 
致 了 行为 的 差异 化 ， 这 让 我 们 必须 在 


设计 中 为 其 设置 不 同 的 指引 万 式 ， 让 他 们 能 够 顺利 接受 信息 并 到 达 我 们 的 所 需 的 目的 地 。 
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3. 产 品 周期 


期 待 期 其 封 测 期 内 测 期 不 删 档 公测 其 稳定 运营 其 品牌 建设 期 





急 el — 
预 热 期 测试 期 运 写 期 
(反复 定位 期 ) (反复 验证 期 ) (品牌 深化 期 ) 





立项 研发 期 期 待 期 预告 期 内 测 期 公测 期 成 熟 期 


产品 的 周期 ， 影 响 着 产品 的 阶段 性 目标 。 正 如 处 于 不 同年 龄 段 的 孩子 ， 我 们 需要 给 予 不 一 样 的 呵护 。 产 品 也 如 孩子 
一 般 在 不 断 地 成 长 和 变化 ， 在 与 市 场 接触 的 过 程 中 ， 它 们 的 营销 目标 也 在 不 断 变化 ,在 页 面 设计 过 程 中 我 们 必须 充分 了 
解 产 品 所 处 的 运营 节点， 从 而 将 设计 更 好 的 指 同 产 品 的 最 终 需 求 ， 实 现 切 实 有 效 的 商业 化 设计 。 


产品 周期 我 们 可 以 分 为 三 个 大 阶段 ， 八 个 细 分 阶段 。 三 个 大 阶段 分 别 是 预 热 期 、 测 试 期 和 运营 期 ， 而 每 个 时 期 义 有 
进一步 的 细 分 ， 如 : 预 热 期 分 为 期 竺 期 和 预告 期 ， 测 试 期 也 会 根据 产品 的 不 同 分 为 封 出 、 内 测 、 不 删 档 测 ( 主要 针对 游 
戏 产 品 ) 和 公测 ， 运营 期 则 分 为 稳定 运营 和 品牌 建设 期 ( 当然 产品 还 有 一 个 较 长 的 研 友 期 ， 因 为 在 研 友 期 ， 产 品 暂时 未 
投入 市 场 运 襄 ， 所 以 在 这 里 并 不 把 它 归 类 其 中 ) 。 


(1) 预 热 期 


预 执 期 下 是 预先 调动 市 场 热度 ， 它 通常 是 在 产品 即将 研 友 完成 时 开始 的 ， 它 通过 透露 一 些 产 品 信息 提 高 产品 在 市 场 
上 的 期 待 值 和 知名 度 。 


在 产品 概念 相对 明确 的 情况 下 ， 为 了 使 产品 提前 进入 市 场 预 热 、 提 高 产品 的 认识 度 ， 市 场 推广 部 分 会 在 这 个 阶段 对 
产品 进行 一 些 概念 的 推广 和 宣传 ， 并 收集 市 场 反馈 ， 与 此 同时 也 会 同步 进行 产品 的 研发 。 这 时 产品 拥有 较为 明确 的 概念 
并 同步 进行 产品 开 友 。 设 计 师 也 会 获得 一 定 的 核心 概念 和 设计 草图 。 市 场 端 主要 负责 产品 的 市 场 预 热 、 概 念 推广 。 对 于 
设计 师 来 说 ， 这 个 时 期 并 无 较 多 的 产品 资源 和 素材 ， 市 场 推广 围绕 着 产品 概念 以 较为 开放 的 形式 展开 并 促成 一 定 的 市 场 
预 热 和 讨论 。 我 们 通常 称 之 为 期待 站 "设计 。 

预告 期 : 


这 个 时 期 的 主要 任务 是 同市 场 告 知 产 品 即 将 上 市 ， 这 个 时 期 产品 开 友 基本 完成 ， 可 在 一 定 程度 上 使 用 或 提供 服务 ， 
但 并 不 同市 场 开 放 产 品 。 市 场 端 可 拥有 一 定 的 产品 资料 进行 推广 预 热 并 实现 概念 的 落地 , 辣 用 户 介 绍 相对 具体 的 产品 资讯 。 
设计 师 可 以 结合 资料 ( 产品 概念 的 展示 介绍 ) ， 将 开放 式 的 概念 落地 于 产品 具体 的 服务 和 操作 中 。 我 们 通常 称 这 个 阶段 
的 设计 为 "预告 站 "建设 。 
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(2) 测试 期 





测试 期 是 产品 第 一 次 与 用 户 和 市 场 接触 的 过 程 ， 它 通过 各 种 试 运 豆 听取 用 户 声音 ， 并 对 产品 进行 修正 改进 ， 这 里 我 
们 根据 测试 的 内 容 和 市 场 开放 程度 将 其 分 为 四 个 小 阶段 : 封 测 期、 内 测 期 、 不 删 档 测 试 期 、 公 测 期 。 


封 测 期 : 


封 测 ， 也 叫 封闭 性 测试 ， 这 个 阶段 ， 由 于 产品 的 完 束 度 有限 ， 测 试 处 于 小 心 试 水 阶段 ， 邀 请 和 招 胡 的 测 坛 人 员 通 单 
是 相对 资深 的 专业 用 户 和 媒体 ,并 通过 测试 人 员 给 出 专业 的 意见 反馈 ,并 对 产品 进行 修改 。 封 测 期 招募 用 户 人 数 通 党 较 少 ， 
而 整个 测试 过 程 也 是 比较 封闭 的 。 


内 测 期 : 


内 测 是 相对 公测 而 言 的 ， 开 放 性 比 封 出 高 一 些 ， 比 公测 小 一 些 ， 内 测 会 根据 产品 的 需要 分 为 几 个 阶段 ， 测 试 数据 民 
好 的 产品 可 能 瓯 经历 一 次 内 测 ， 也 有 产品 需要 经 历 两 三 次 内 测 才能 进入 不 删 档 测 和 公测 。 


内 测 也 是 一 个 产品 逐渐 开放 的 测试 ， 测 试 人 数 通 单 逐 次 递增 。 测 试 内 容 也 由 产品 本 身 开放 到 市 场 运 言 以 及 未 来 公测 
后 的 营销 模式 。 这 时 候 我 们 主要 拥有 并 需要 推广 的 信息 有 产品 资讯 和 测试 反馈 。 市 场 部 门 也 会 展开 以 测试 反馈 为 主要 任 
务 的 市 场 推广 。 而 这 时 官方 主要 承载 的 任务 是 提供 测试 激活 码 、 客 户 靖 下 载 、 产 品 信息 落地 、 测 试 反 蚀 并 修改 ， 并 对 洪 
在 用 户 进行 跟踪 ,进一步 明 确 产品 和 市 场 方向 。 而 这 个 时 期 的 官网 我 们 称 其 为 测试 站 。 


不 删 档 : 


不 删 档 便 是 玩家 可 以 保留 其 游戏 记录 ， 所 以 这 一 步 测 试 通 单 存在 于 游戏 产品 ， 在 不 删 档 之 前 的 所 有 测试 玩家 的 游戏 
记录 都 是 空 的 。 不 删 档 根 据 产 品 的 成 熟 度 分 为 限 号 不 删 档 和 不 限 号 不 删 档 。 产 品 进 入 不 删 档 阶段 也 便 是 开始 了 公测 前 的 
最 后 准备 。 在 一 定 意义 上 说 ， 不 限 号 的 不 删 档 也 殊 相 于 公测 了 ， 算 是 一 次 公测 的 预演 ， 并 收集 和 修改 最 后 内 容 。 


公测 期 : 


在 确定 了 产品 与 市 场 需求 拥有 民 好 的 吻合 度 时 ， 产 品 残 进 入 了 正式 的 公开 测试 期 ， 根 据 市 场 的 开放 度 、 区 域 属 性 及 
用 户 需 求 的 演化 ， 产 品 也 会 进行 相应 的 调整 ， 所 以 公测 从 一 定 程度 上 来 讲 也 是 属于 测试 期 ， 不 过 由 于 人 数 的 不 本 所 
以 我 们 称 之 为 公开 测试 期 。 另 外 产品 进入 了 公测 也 便 进 入 了 产品 的 第 一 个 不 稳定 运 襄 期 ， 对 于 游戏 产品 来 说 ， 公测 
的 产品 ， 一 万 面 推出 新 的 版 本 来 保持 玩家 的 新 鲜 感 和 热度 ， 另 一 方面 ， 也 会 通过 市 场 的 测试 反 4 se 
一 定 的 调整 ， 不 断 地 目 省 和 更 新 才能 获得 更 长 久 的 生存 。 


在 产品 公测 后 ， 设 计 师 们 会 友 现 活动 专题 越 来 越 多 ， 那 是 产品 在 通过 不 同 的 事件 配合 运营 结 点 在 进行 推广 ， 它 包括 
资源 和 推广 、 拉 新 用 户 、 拉 收入 和 游戏 数据 平衡 等 ， 而 这 时 的 官网 主要 承载 了 三 个 最 重要 的 功能 : 下 载 、 官 方 活动 和 产 
品 更 新 信息 的 推送 、 严 品 视 党 印象 。 除 这 三 点 之 外 的 其 他 信息 将 逐渐 的 由 许多 专业 的 洲 戏 平台 进行 分 担 。 另 外 ， 品 牌 建 
设 也 在 这 个 时 候 开 始 建立 并 逐步 深化 。 


(3) 运营 期 


运 襄 期 从 大 的 范围 来 说 ， 包括 公测 的 不 | 产品 在 市 场 上 相对 成 熟 后 的 稳定 运营 期 ， 以 及 产品 在 市 场 上 拥 
有 比较 正面 的 口碑 和 写实 用 户 后 的 品牌 建设 期 。 从 一 定 意义 上 说， 稳定 和 不 稳定 是 一 个 相对 的 概念 ， 因 为 市 场 需求 和 人 
们 的 价值 观 都 是 在 不 断 变 化 的 ， | 能 应 对 这 样 的 变化 。 所 以 稳定 和 不 稳定 运 膏 也 是 一 个 交 
蔡 的 过 程 。 网 络 产 品 可 以 在 目 身 的 版 本 上 不 断 更 新 ， 而 实体 产品 则 推出 一 代 、 二 代 、 三 代 等 不 同 的 产品 ， 也 是 个 目 我 更 
蔡 的 过 程 。 如 果 目 身 不 做 调整 要 开 个 百年 老 店 也 是 实 属 不 易 的 。 


许多 产品 在 公开 测试 之 后 的 不 稳定 运营 期 中 没有 调整 和 找到 适合 自己 的 运 曹 思路 ， 或 者 因 产 品 本 身 的 BUG 和 失误 导 
致 最终 的 消 声 匿 迹 ， 也 有 产品 在 测试 期 没有 把 握 住 主心骨 ， 片 面 地 以 市 场 风 向 来 定位 自己 的 格调 ， 经 过 多 年 的 调整 反复 


未 能 公测 而 最 终 流产 。 
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对 于 产品 定位 和 产品 运 言 是 一 个 专业 的 读 题 ， 做 为 一 个 设计 师 在 这 里 只 能 摘 述 情况 ,暂时 也 无 法 下 最 终 的 万 法 定论 ， 
只 能 从 设计 角 硫 说 ， 把 握 并 坚定 产品 的 主 调 性 很 重要 ， 保 持 目 身 产品 与 竞 品 间 的 差异 化 ， 明 确 各 项 设计 工作 和 专题 的 主 
要 目的 ， 有 效 地 传达 信息 揭 5 引 用 户 是 视觉 设计 的 关键 。 


4. 网 络 整合 营销 流程 图 

用 户 是 如 何 一 步 步 地 进入 我 们 的 产品 的 ， 他 们 是 通过 怎样 的 渠道 知道 我 们 、 愿 意 开始 了 解 我 们 ， 并 最 终 成 为 我 们 的 
用 户 的 ? 面 对 每 个 不 同 的 营销 阶段 和 目的 ， 我 们 在 设计 上 需要 如 何 区 别 对 待 呢 ? 

这 里 我 们 将 用 户 从 生活 到 产品 的 过 程 分 为 四 个 阶段 ， 它 们 分 别 是 : 生活 引导 层 、 广 告 诱发 展 、 网 页 落地 层 、 产 品 
在 不 同 的 层 ， 用 户 都 有 不 同 的 心理 预期 ， 所 以 要 关注 和 运用 这 种 心理 预期 ， 做 好 在 各 个 层 之 间 的 顺利 引导 。 


有 


平 媒 广告 生活 平台 


[ 硬 广 ] [ 硬 广 ] 





扩 


街 边 广告 口碑 交 汤 


微 博 、 空 间 、 新 闻 。 ”与 产品 相关 的 
IM 网 络 聊天 推荐 (广告 ) 平 台 


[地 











生活 引导 层 


FAN 
县 上 指向 需求 | 生硬 广 
[指向 产品 ] 





告 诱发 层 





领 奖 、 返 利 网 页 
参与 活 [信息 落地 ] 
参与 活动 对 时 充值 、 下 载 

[进入 游戏 








产品 


[需求 落地 ] 


生活 引导 层 





生活 引导 层 上 的 设计 ， 通 党 表现 得 更 加 生活 化 ， 它 可 能 是 某 种 人 生 信 仰 、 消 费 价值 观 或 是 一 种 又 和 的 服务 帮助 ， 它 
的 受众 面 广 ， 它 从 生活 的 切入 点 引 友 大 众 对 产品 的 兴趣 和 好 奇 。 对 于 设计 师 来 说 ， 这 个 阶段 的 设计 思路 可 以 更 开阔 ，, 它 
主要 以 引 友 大 众 兴趣 为 主要 目的 ,产品 的 具体 信息 在 这 个 环节 上 可 以 先 稍微 弱化 。 甚 至 有 些 在 行业 中 用 己基 数 较 大 的 品牌 ， 
在 生活 引导 层 上 的 广告 并 不 指向 和 提 及 自己 的 产品 ,而 是 更 多 引 友 用 户 对 一 类 产品 的 需求 和 好 感 ， 通 过 大 的 基数 比例 提 
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高 目 己 产品 的 被 天 注 度 。 


这 类 广告 的 投放 地 点 通常 是 日 常生 活 平 台 社 区 : 对 于 线 下 的 投放 来 说 有 公交 站 、 地 铁 站 、 户 外 广告 牌 等 ; 对 于 网 络 
传播 来 说 ， 微 博 、 微 信 、 空 间 、1M 网 络 聊天 都 属于 这 类 平台 。 


关注 诱发 层 


相 较 于 生活 引导 层 来 说 所 癌 性 更 明确 了 一 些 ， 它 是 基于 产品 本 身 进行 创意 ， 通 过 广告 引 友 用 户 对 产品 本 身 的 天 注 。 
进入 购买 诱 友 层 的 用 户 大 多 经 过 初级 的 生活 引导 和 筛选 ， 他 们 可 能 对 与 同类 系列 产品 或 者 对 公司 整合 品牌 有 兴趣 ,这 个 
阶段 的 目标 是 将 这 类 用 尸 进一步 转化 成 产品 的 用 户 ， 引 友 他 们 了 解 和 购买 的 愿望 。 


而 这 类 广告 的 投放 地 点 通 剃 是 相对 专业 的 平台 ， 对 于 游戏 来 这 ， 游 戏 平 台 、 软 硬件 平台 、 游 戏 专 业 论 坛 等 都 是 此 类 
广告 的 投放 地 点 。 当 然 线 下 的 网 吧 或 六 戏 展会 也 是 相对 有 针对 性 的 平台 。 所 以 设计 师 在 制作 广告 时 也 会 根据 投放 地 点 来 
了 解 营 销 阶 段 和 营销 目的 ， 并 进行 针对 性 的 设计 。 


网 页 落地 层 


到 达 网 页 落地 层 的 用 户 ， 相 对 来 说 都 是 对 产品 有 一 定 兴 趣 的 用 户 ， 所 以 在 这 里 没有 必要 绕 太 大 的 圈子 或 卖 天 子 来 讲 
产品 ,来 所 接地 气 儿 的 最 好 。 由 于 具体 的 产品 信息 比较 多 ， 所 以 信息 的 呈现 通常 以 网 页 或 网 站 的 形式 出 现 ， 它 基本 上 是 
围绕 着 产品 进行 详细 地 说 明和 介绍 ， 它 通过 文字 、 图 片 、 视 频 、 动 画 的 配合 为 用 尸 呈 现 丰 语 的 产品 信息 。 


在 这 个 部 分 设计 师 可 能 更 多 地 着 力 于 信息 的 梳理 和 在 阅读 和 搜索 资料 过 程 中 的 交互 体验 。 


产品 层 


对 于 市 场 万 回 的 设计 师 来 襄 ， 将 用 户 市 领 到 产品 面前 ， 融 基本 完成 了 任务 ， 接 下 来 对 于 产品 融和 市 场 无 天 了 ， 有 问 
题 找 产品 经 理 或 产品 设计 是 。 从 一 定 意 义 上 说 ， 从 生活 引导 层 到 关注 诱 友 层 骨 到 信息 深 地 层 最 终 来 到 产品 面前 ， 基 本 上 
完成 了 网 络 言 销 的 一 个 循环 ， 但 市 场 是 在 不 断 变 化 的 ， 用 户 的 需求 和 价值 观 也 在 变化 ， 所 以 产品 也 需要 不 断 更 新 ， 来 保 
证 用 户 的 和 儿 性 、 热 大 和 忠诚 愿 ， 所 以 新 一 轮 的 网 络 整合 言 销 又 将 开始 。 对 于 老 玩 家 来 说 ， 产 品 可 以 在 目 身 的 平台 或 专业 
平台 上 进行 推广 传播 ， 对 于 新 玩家 来 况 ， 言 销 的 大 网 还 需要 投向 更 远 的 生活 引导 层 进行 新 一 轮 的 战斗 。 


从 生活 到 产品 、 从 概念 到 内 容 深化 ， 目 标 用 户 从 漫 无 目的 社交 中 引 友 购买 的 需求 ， 并 将 需求 转化 为 对 产品 的 兴趣 ， 
并 通过 各 种 活动 和 产品 介绍 了 解 并 选择 购买 产品 ， 成 为 我 们 的 最 终 用 户 。 在 这 个 循环 往复 的 过 程 中 ， 设 计 师 需要 把 握 每 
一 次 襄 销 的 目的 ， 做 好 正确 地 指引 。 撤 大 网 时 残 需要 让 品牌 视 况 和 概念 生活 化 、 社 会 化 ， 当 用 户 接近 产品 时 我 们 便 需 要 
逐个 击破 ， 体 现 出 产品 的 专业 性 残 显 得 十 分 重要 。 所 以 ， 我 们 要 让 视 沉 设计 拥有 全 局 观 ， 并 与 产品 言 销 保持 一 致 的 步调 
合力 前 进 ， 做 最 有 效 的 设计 。 


做 为 一 个 商业 设计 师 ， 了 解 目 己 、 了 解 团 队 合作 、 了 解 产 品 和 产品 周期 以 及 产品 营销 可 以 帮助 我 们 更 加 理 地 控制 忆 
术 并 解放 大 脑 ， 为 设计 做 好 正确 的 拿 择 ， 对 产品 、 对 合作 的 多 维度 视角 正 是 做 为 一 个 合格 的 商业 设计 师 所 要 具备 的 职业 
世界 观 。 
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A $ 一 $ $ 
B 网 站 建设 新 元 年 的 设计 趋势 
逆 推 网 页 设计 这 十 几 年 ， 网 络 整 合营 销 不 断 细 化 ， 面 临 着 新 的 市 场 洗礼 ， 哪些 
网 站 表现 方式 将 被 淹没 在 这 滚滚 洪流 中 ， 而 哪些 又 将 收 到 船 票 被 带 上 湛 亚 方舟 呢 ? 
| | 计 我们 回头 逆 推 网 站 的 出 生 和 演变 ， 站 在 即将 结束 的 这 个 节点 ， 挑选 属于 新 元 年 的 


视觉 设计 ! 





一 、 网 站 设计 的 一 次 细 分 设计 


为 了 能 够 更 好 地 预测 网 页 未 来 的 变化 趋势 ， 我 们 先 来 梳理 一 下 网 站 设计 的 友 展 演化 史 。 





网 站 设计 网 站 设计 


SL 
网 站 设计 
> 





WEBDESIGIN 





【网 站 设计 的 四 极 分 化 图 】 


1. 初 期 

网 页 设计 发 展 初 期 ， 由 于 技术 的 限制 ， 作 为 一 种 新 型 的 传播 载体 ， 人 们 只 能 简单 地 放置 产品 资讯 ， 通 过 网 址 来 访问 
资讯 内 容 。 

2. 中 期 


1999 年 第 一 则 网 络 广告 在 网 易 上 投放 ， 从 此 网 页 的 访问 分 流向 了 广告 ， 而 真正 的 网 络 言 销 也 便 从 这 里 开始 。 


3. 后 期 
产品 信息 传播 的 分 工 
随 着 技术 的 发 展 ，Flash、 视 频 等 技术 的 不 断 成 熟 ， 产 品 的 在 线 传播 可 以 通过 多 种 形式 进行 ， 于 是 产品 资讯 也 便 分 化 
为 两 类 : 
一 类 是 以 视听 为 主 的 品牌 建设 ， 主 要 传达 产品 的 理念 、 视 党 映像 。 


男 一 类 是 以 资料 为 主 的 ， 主 要 传达 产品 的 具体 信息 ， 通 党 以 大 量 的 文字 或 图 文 结合 的 形式 表现 。 





广告 传播 的 分 工 


在 广告 传播 上 技术 的 持 新 同样 也 给 广告 传播 市 来 了 更 多 的 表现 形式 。 其 中 Web 2.0 的 到 来 为 广告 传播 形式 做 出 了 重 
要 的 贡献 。 由 此 产生 的 各 类 社区 平台 为 用 户 和 产品 的 进一步 交流 产生 了 帮助 ， 资 讯 也 因此 进入 了 高 速 传播 的 阶段 。 平 台 
交流 和 指 同 产品 的 软 、 硬 广告 进行 了 配合 互动 。 
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WA 
和 
Widget、SEM、 移 动 终端 互动 站 号 





Y 
指向 产品 
推广 产品 广告 ( 活动 站 ) 
全 面 产品 资讯 门户 站 
品牌 建设 品牌 站 


展示 这 个 图 表 是 为 了 更 好 地 说 明 这 几 类 网 站 在 整合 营销 中 的 位 置 和 作用 。 

该 图 表 做 了 色彩 归纳 ， 大 家 可 以 将 其 对 应 于 右 侧 图 表 。 

我 们 从 用 户 端 出 友 ， 来 了 解 一 下 现在 网 络 整合 高 销 是 如 何 从 用 户 到 产品 的 。 

早年 许多 产品 是 直接 通过 硬 广 告 的 方式 将 用 户 强 行 拉 入 产品 ， 这 对 整个 品牌 建设 的 伤害 度 是 很 大 的 ， 现 在 的 推广 更 
趋向 于 软 性 的 交流 互动 ， 在 潜移默化 中 达成 天 系 。 

1 平台 互动 

平台 交流 也 是 做 为 软 广告 的 重要 承载 体 ， 它 通过 社区 交流 或 微 博 互动 传播 形式 对 产品 或 需求 进行 培育 ， 并 将 需求 顺 
利 指向 产品 或 品牌 。 

2. 指 向 产品 

活动 站 作为 指向 产品 的 硬 广告 的 资料 落地 部 分 ， 引 续 了 其 广告 的 视 党 化 特性 也 包 合 了 更 丰富 和 具体 的 信息 介绍 。 它 
会 通过 "利诱 "和 "色诱 "吸引 用 户 ， 并 指引 其 进行 特定 的 行为 活动 ， 使 其 与 产品 产生 关系 和 莫 性 。 

3. 产 品 资讯 拓展 

如 果 活 动 推 广 顺 利 ， 用 户 融会 进一步 对 详细 的 产品 或 更 多 的 产品 信息 进一步 了 解 和 阅读 ， 或 通过 门户 站 链接 并 参与 
更 多 的 活动 。 

4. 感 受 品 牌 


通过 不 断 地 互相 了 解 从 而 建立 品牌 的 起 诚 度 ， 而 在 品牌 站 也 会 通过 丰富 的 视 完 和 概念 引导 树立 品牌 的 个 性 以 及 和 其 
他 天 品 的 区 别 度 ， 使 用 户 认 识 并 记忆 深刻 。 
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二 
入 0 一 Hu 
国 j 站 el Campaignsite 二 A le Brandsite 
资料 落地 门户 站 品牌 建设 视频 、 泛 娱乐 类 品牌 站 





网 站 设计 





laa Interactionsite 
社区 、 博 客 、Widget、SEM 


Minisite 


活动 广告 页 面 








我 们 可 以 看 到 由 四 项 专职 任务 引出 的 四 类 网 站 类 型 ， 它 们 是 网 络 整 合 襄 销 不 可 或 缺 的 重要 组 成 部 分 。 


1. 互 动 站 ( Interactionsite ) 


互动 平台 站 更 像 是 一 个 网 络 市 集 ， 不 论 是 用 户 端 还 是 产品 端 都 可 以 在 这 里 传播 资讯 ， 并 进行 频繁 的 互动 ， 随 着 技术 
上 友 展 ， 互 动 形式 也 日 趋 多 样 化 ， 从 博客 到 社区 平台 、 再 到 微 博 、 手 机 终端 ， 互 动 基本 已 经 占领 了 日 昔 所 有 碎片 时 间 ， 成 
为 了 生活 的 一 部 分 。 








2. 门 户 站 ( Campaignsite ) 


门户 站 负责 产品 资讯 的 建设 ,主要 承担 着 从 各 平台 引入 的 需求 的 资料 落地 。 它 包 括 了 涉及 产品 的 各 类 资讯 、 产 品 介绍 、 
版 本 更 新 、 最 新 公告 、 最 新 活动 等 。 它 拥有 对 搜索 引擎 的 友好 表现 和 完好 的 内 容 广 持 、 注 重 网 站 的 易 用 性 和 强大 的 在 线 
沟通 功能 以 及 全 面 的 网 站 监测 与 分 析 及 市 场 推广 策划 ,得 是 网 站 的 主力 军 。 


3. 活 动 站 (Minisite) 


活动 站 作为 精准 膏 销 的 重要 形式 ,为 产品 的 针对 性 推广 做 出 了 巨大 贡献 ,早年 其 受到 市 宽 的 影响 ,表现 形式 较为 单一 ， 
现在 真正 揭 开 了 其 广告 的 本 来 面目 ,强烈 的 视 沈 表现 成 为 了 它 最 重要 的 特征 。 它 唤 像 战争 中 的 突击 队 ,精准 、 迅 独 、 有 力 ! 


4. 品 牌 站 ( Brandsite ) 


如 果 这 门户 站 是 主力 军 ,那么 品牌 站 束 是 外 交 官 ， 它 主要 通过 视 千 包 六 传达 产品 概念 ，, 随 着 技术 的 友 展 ，Flash、 视 频 、 
多 媒体 因 其 生动 的 展示 形式 成 为 了 品牌 站 的 主要 表现 手段 。 
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四 、 四 类 网 站 详解 
1. 互 动 站 细 分 设计 


手机 平台 
ME 从 区 





内 容 为 王 ， 交 互 设计 从 形式 加 功能 转 芝 ， 注 重信 息 的 传递 、 互 动 ， 设 计 变 得 不 再 重要 。 





互动 站 的 不 断 成 熟 也 标志 着 网 络 整 合营 销 建设 的 不 断 深入 和 细 化 。 社 区 平台 的 信息 传播 形式 、 搜 索 平台 更 为 精准 的 
语义 学 研究 、 玫 机 平台 的 多 样 化 互动 都 是 未 来 网 络 整 合营 销 建设 的 重心 所 在 。 








1) 社区 平 合 


减少 获取 信息 的 时 间 ; 通过 生活 化 的 交流 万 式 获 取 产 品 广 告 信息 ， 过滤 垃圾 信息 和 推送 即时 有 效 的 信息 ; 侵占 用 户 
使 用 时 间 ， 增 加 产品 粘度 。 


平台 则 的 传播 无 处 不 在 : 强化 了 人 与 人 之 间 持 续 联 系 ， 为 信息 传播 拓展 出 了 更 阔 的 空间 。 


MY NETWORK 


Be Behance Live the dream at Highbury and see 


in Linkedin Twelve Event Management in acion @ffc 
httpJA.co/U9YydZ144 

f£ Facebook 

te 园 印 加 RDOURBLOG 

加 Vimeo 


Get in touch with mel 


flickr.com/iknowpixels 
, 贺 abramov.deviantart.com 
[= 
国 behance.net/alexabramoy 
包 twitter.com/gipnoz 


会 EN FR ES 汉语 
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轧 推送 渠道 精准 化 :这 是 一 个 系统 整合 信息 、 呈 现 有 效 信息 的 过 程 ,可 以 是 通知 、 私信 、 评论 、 电话 、 短信 、 微 博 信息 
SNS 中 好 友 动 态 和 阅读 器 中 推荐 阅读 的 内 容 等 


来 堆 糖 ， 收 集 、 发 现 美好 物品 


Oo vs < 
NA 自 ;本 癌 | 每 
发 现 我 的 爱 物 找到 喜好 相投 的 朋友 加 入 同好 主题 小 组 苛 移 每 日 团购 
欢迎 您 ，ejin 提醒 私信 令 [ 蛙 定 帐号 ][ 设 置 ][ 退 出 ] 


| 分 类 浏览 : ”全 部 | 品味 生活 | 服饰 风尚 | 玩乐 主义 | 美味 关系 | 艺术 设计 | 栈 拉 您 有 1 个 私信 
知道 了 
我 的 提醒 > 
我 的 堆 糖 > 





限量 版 可 乐 











各 有 
MOK, rN NE RE 2 OR » ET Sree EX。 
三 缠 壬 
的 2950 肿 天 .对 
各 职 注 雹 疾 片 这 的 是 一 个 关 疙 再生 区 术 一 笋 。 荐 么 虹 入 驴 不 会 泥 为 了 一 次 不 条 加 和 于。 这 a 全 部 转 夭 术 主 论 {209) 其 疾 计 论 要 
个 页 的 0 DO v 钦 * * 
尼 人 我 们 县 诗 这 是 最 让 人 类 HOLD 不 性 的 MY! ! 太 壮 况 了 有 
> ?9 看 os hapzJurleyllFapw 
已 全 JP 昌 作 看 了 - 亲 
全 夫 便 计生 着 
分 和 有 5 扩 24 招 疯 彩 己任 有 寺 基 从 了 男 主 负 是 准 各 名称 走失 时 





2 Cu 2 人。 执 和 要 讲 冷 疾 话 二 ; 久 抽检 .要 注 pepe "原来 你 前 世 的 情人 今世 是 以 :中 竺 时 
\ et 所 的 形象 出 们 也 宗 测 剂 前 世情 人 今生 是 谁 吧 ! 测试 地 


和 it 一 个 各 并 肌 开关 人 人 个 示 ] 的 补 吉 与 音 关 
现 生 基 二 所 





Ka < 
2 从 Po nl 
玉 癸 死 了 41， 天价 + 1 ， 决 字 朋 天 放 去 看 的 旭 
a2 DL 
cA 窒 了 革 太 全 电 
Pr 总 用 内 和 0 共和 所 于 





(2 ) 搜索 平台 
搜索 平台 可 以 加 深 对 资讯 的 广告 和 深度 的 支持 和 判断 。 ( 由 于 搜索 平台 研究 的 专业 性 ， 本 书 不 对 其 进行 深入 摘 述 ) 
(3 ) 手机 平台 


es ee 
和 频繁 ， 人 们 对 信息 互动 和 分 享 更 加 热衷 
ea di 手机 端的 普及 和 发 
展 ， 手 机 电子 支付 及 二 维 码 的 应 用 实现 了 虚 
拟 和 现实 的 更 有 效 接轨 。 另 外 基于 智能 手机 
GPS、 触 屏 、3D 陀螺 仪 的 特点 ， 也 将 涌现 出 
更 多 优秀 的 产品 运用 


我 们 推荐 一 段 视频 来 绪 合 概括 襄 销 在 于 
机 平台 的 社交 和 商业 的 便捷 应 用 。 





http://v.youku.com/v_show/id_XMjgONTE4ODEy.html 
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2. 门 户 站 细 分 设计 





元 好 的 内 容 支 持 全 面 的 网 站 监测 与 分 析 
对 搜索 引擎 的 表现 友好 网 站 易 用 性 
支持 多 样 终 广 在 线 沟通 功能 


支持 全 方位 的 资料 落地 
MA | i 7 





资讯 建设 





门户 站 的 未 来 使 依 是 实现 更 多 元 化 的 资料 落地 文 持 和 更 精准 的 用 户 监 测 。 


随 痢 网 站 承载 功能 的 细 分 ， 门 户 站 的 功能 更 倾 癌 于 资料 落地 ， 门 户 站 主要 接 引 着 来 目 各 类 社区 、 引 敬 和 终端 的 用 户 ， 
在 进一步 优化 内 容 文 持 和 满足 搜索 引擎 的 基础 上 如 何 去 进 一 步 又 持 多 样 化 的 终端 成 为 了 未 来 的 首要 任务 和 创新 点 。 


(1 ) 支持 全 万 位 的 资料 落地 

”对 内 容 文 持 

对 内 容 的 支持 主要 表现 在 “内容 信 息 的 优化 "和 ”内容 管 理 的 优化 "。 

内 容 信息 的 优化 主要 包括 : 内 容 素 材 、 容 量 、 编 排 以 及 更 新 的 频率 与 呈现 万 式 。 


内 容 管理 的 优化 主要 通过 内 容 与 用 户 、 管 理 、 功 能 的 完美 结合 使 信息 以 民 好 的 呈现 方式 输出 给 用 户 。 在 这 万 面 语义 
学 的 友 展 将 市 给 信息 更 加 精准 的 输出 。 


黑 镜 第 一 季 的 电视 剧 图片 …… (全 部 333| 添加 图 片 ) 二 四 区 
pp 15 分 钟 前 想 看 


by 


9681 人 在 看 / 139215 人 看 过 / 34711 人 想 看 





喜欢 这 部 电视 剧 的 人 常 去 一 


All about BBC 小 组 


喜欢 这 部 电视 剧 的 人 也 喜欢 …- 
四 回回 


> eo 


外 景 涛 同好 组 ! 1 1 411411144 让 组 






神探 夏 洛 克 ‘Sherlock) 小 组 


LeVIS : 


| Sa/ a 
Te { ; 
‘SW (Ne 
”AA Vi, 
7 ' 
| De 





(AVENDERS 





复仇 者 联盟 少年 派 的 育 幻 漂 志明 与 春 妖 





流 
黑 镜 第 一 季 的 短评 …… (全 部 46691 条 ) 我 来 说 两 句 a SW 
热门 / 最 新 1 我 关注 的 
也 一 儿 丰 女 女友 女 2011-12-14 642 有 用 





两 句 话 : 1、 此 为 年 度 英国 最 佳 剧 集 。2、 看 此 片 需 内 心 强 大 。 


民 好 的 信息 管理 将 保证 用 户 人 在 接收 信息 过 程 中 的 连贯 性 ， 使 信息 持续 不 断 地 在 潜移默化 中 被 浏 唤 和 吸收 。 
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" ”对 搜索 的 支持 

很 多 网 站 都 已 经 了 解 到 了 搜索 引擎 优化 对 于 网 站 的 重要 性 ， 除 了 从 SEO 的 角度 去 设计 之 外 ( SEO 属于 另 一 通道 的 专 
业 领 域 ， 这 边 融 不 再 敞开 深入 摘 述 ) ， 现 阶段 的 动画 视觉 表现 也 纷纷 对 搜索 引 警 表示 友好 。 从 前 由 于 Flash 所 有 的 文字 
言 息 对 封装 进 了 动画 ， 使 得 搜索 引擎 无 能 为 力 ， 而 现在 出 现 了 JS ( HTML 5 ) 动画 和 具有 独立 信息 IP 的 Flash 技术 ,使 得 
在 满足 资讯 搜索 的 同时 也 兼备 了 较 好 的 动画 视觉 体验 。 


使 用 JS 动画 























Tips & tricks 
live flming -a0 ‘art Wii score' 
Mario Kart and the Wii Logo are trademarks of Nintendo © 2011 Nintendo | 
| 全 区号 < 一 一 > 
En > | 


http://www.nNintendo.com.au/gamesites/mariokartwii/ 


支持 搜索 引擎 的 Flash 全 站 














洛克 王国 http://roco.qq.com 
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"对 终端 的 支持 


多 平台 、 多 设备 浏览 的 统一 性 ， 市 来 交互 设计 一 个 全 新 挑战 ， 对 多 种 终 闯 的 有 效 叉 持 成 为 了 资料 元 好 落地 的 保证 。 
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CONTENT STRATEGY spigot CREATIVE DESIGN & CONTENT STRATEGY CREATIVE DESIGN : CONTENT STRATEGY 
CREATIVE DESIGN g FOR WEBSITES AND MOBILE ApPLICATIONS OT 
CONTENT STRATEGY @OgO oo 


FOR WEBSITES AND MOBILE APPLICATIONS 


i 一 
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EE OOO i Tigies io mI ih a 
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cAsTI IRON SF HOSTED 
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PERMANENTLY SHOW UBRARY 
FoLDER IN OS X LON 
PERMANENTLY SHOW LIGRARY 


a 
5 DD 恬 恒 
THERESHO FI KEY ST 
= Fi AwesouE 
| 本 -省 -. 


0 
加 PSTERUS - BELLN 
SHIFT S : 888 
N= Es 











动态 流体 布局 


流动 布局 的 设计 主要 解决 了 一 些 不 同 终 端 和 显示 器 的 浏览 问题 。 它 巧妙 地 重 排 元 素 ， 并 填补 了 网 页 的 所 有 空间 ,而 


且 在 每 个 浏览 器 和 不 同 分 辨 率 的 显示 器 上 都 表现 出 色 ， 也 同样 适 ey ei ey 同时 它 通常 配 以 流畅 
的 动画 效果 ， 其 中 有 些 甚 全 针对 不 同类 别 有 不 同 的 效果 。 


i 





基于 栅 格 的 多 列 布局 
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屏幕 分 辩 率 的 增加 ， 基 于 栅 格 布局 基础 
上 ,可 以 使 用 多 列 在 同一 空间 呈现 更 多 内 容 。 
更 多 的 网 站 在 朝 着 多 列 布 局 、 流 动 布局 以 及 
前 面 讲 到 啊 应 式 设 计 。 网 页 栅 格 系统 是 从 平 
面 栅 格 系统 中 友 展 而 来 ， 使 用 栅 格 系统 让 网 
页 的 信息 呈现 更 加 美观 易 读 ， 更 具 可 用 性 。 
网 页 设计 上 将 更 加 的 灵活 与 规范 。 





(2 ) 全 面 的 用 户 监测 营销 型 网 站 建设 与 运营 


全 面 的 网 站 监测 Wa he 
改善 网 站 运营 Mk 分 析 客 户 数据 
优化 网 站 推广 全 评估 推广 效果 


网 站 宣传 与 推广 网 站 监测 与 分 析 


mi 





增加 销售 机 会 
提升 品牌 形象 


网 站 易 用 性 优化 


网 站 的 易 用 性 主要 表现 在 速度 体验 、 操 作 体验 、 结 果 体 验 、 信 任 体验 四 个 万 面 。 如 何在 资讯 策划 和 交互 设计 上 进行 
进一步 优化 相当 重要 。 


速度 体验 : 也 便 是 网 站 的 打开 速度 ， 它 包括 服务 器 优化 、 代 码 效率 、 图 片 和 Flash 优化 。 防 止 焦 躁 心理 ， 不 让 用 户 
在 等 待 过 程 中 流失 。 
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操作 体验 : 是 用 尸 在 使 用 网 站 过 程 中 的 功能 性 感受 ， 它 包 售 了 6 个 关键 点 一 一 页 面 导航 、 页 面容 量 、 页 面 结构 、 页 
面 链接 、 路 径 设 计 、 帮 助 中 心 。 优 秀 的 操作 体验 会 让 用 户 清晰 地 了 解 自 己 在 网 站 上 能 做 什么 ， 其 次 是 
户 知道 如 何 操作 ， 并 感 竞 到 继续 看 下 去 的 意义 。 


结果 体验 : 区 是 用 户 通 过 操作 行为 获得 结果 的 一 种 体验 过 程 ， 友 好 达到 用 户 预期 的 结果 体验 是 我 们 的 目标 。 

信任 体验 : 对 于 网 站 来 说 ， 信 任 感 决定 了 用 户 对 网 站 信息 的 认可 度 ， 它 由 产品 品牌 和 长 期 建立 的 良好 的 信任 体验 
构成 。 束 网 站 信息 而 言 信任 体验 依附 于 过 去 产品 的 市 场 影 响 力 、 权 威 性 的 支撑 ， 而 对 于 信任 体验 的 建设 
来 说 也 依赖 我 们 正在 进行 的 、 不 断 的 信任 体验 的 支持 。 

(3 ) 在 线 沟 通 功 能 优化 

在 线 沟 通 主 要 包括 : 在 线 客 服 系统 、 潜 在 客户 跟踪 系统 。 

利用 更 新 的 技术 实现 更 即时 和 精准 的 沟通 ， 并 且 在 对 后 期 的 沟通 予以 跟 进 ， 使 潜在 用 户 成 为 真正 的 客户。 ( 这 个 首 

分 可 以 结合 整体 的 用 户 监 测 进行 ， 未 来 可 能 有 更 专业 的 文章 进行 介绍 ) 

3. 活 动 站 细 分 设计 

一 句 话 概 述 : 

活动 页 面 恢复 了 广告 的 本 来 面目 。 





活动 站 作为 广告 营销 的 组 成 部 分 伴随 着 带宽 的 增强 恢复 了 其 广告 的 本 来 面目 。 早 年 活动 页 面 受 到 了 网 站 优化 的 限制 ， 
视觉 表现 在 更 加 注重 延展 性 问题 ， 近 来 ， 随 着 技术 支撑 的 优化 和 带宽 增加 ， 活 动 站 的 设计 呈现 了 大 背景 、 强 版 式 化 的 设 
计 趋 势 。 


活动 站 的 原则 : 强 有 力 的 视 竞 冲击 + 万 便 舒 适 地 快速 浏览 。 
(1 ) 精准 言 销 


活动 站 的 建立 是 根据 产品 的 不 同 运 营 节 点 或 功能 全 部 开放 或 针对 不 同人 群 进行 的 膏 销 活动 ， 它 具有 较 强 的 个 性 和 精 
准 性 ( 这 块 涉及 到 专业 的 产品 策划 ， 殊 不 全 万 位 展开 ) 。 


(2 ) 视 帝 冲击 


三 大 "特点 成 为 了 活动 页 面 广 告 化 的 突出 表现 。 大 背景 的 表现 还 结合 了 更 多 实际 化 的 技巧 万 式 ， 这 边 不 再 折 展 技巧 
万 式 ， 感 兴趣 的 朋友 可 以 关注 本 书 之 前 的 相关 内 容 。 
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" 大 背景 


精致 的 图 片 胜 过 干 言 万 语 ， 宽 市 的 友 展 使 其 更 具 可 行 性 。 给 人 印象 深刻 的 图 片 能 为 用 户 创造 一 个 身 








备 其 境 的 体验 。 


DOVE SIAMO 


CH SIAMO 


Coord GPS; 4 


GOOGLE HAPS ® 


LL To INDI 





" 大 标题 





杂志 、 报 纸 的 设计 师 一 直 使 用 大 标题 ， 以 吸引 用 户 的 注意 和 购买 ， 大 字体 已 证 明 更 有 吸引 力 和 了 明晰 的 沟通 结果 。 


人 LOGOUT PROBLEMATIKA | STARSIIN OTROCI | ODRASLI 


让 。 





Vsake toliko se odklopi! Postani simpatizer 
Spodbujaj aktiven zivljenjski slog. Uravnote#i tas, prezijvetza Prikljuéi se podpornikom ideje za zdravo in uravnoteZeno V okviru projekta LOGOUT, poleg programov redne dejavnosti 
ratunalnikom in mobilnimi napravami, ter v osebni urnik vkljuei prezivljanje casayv druzbi s spletom in sodobnimi tehnologijami ReStart in Digitalna dieta, uvajamo zanimive izobrazevalne 
Sport, rekreacijo, hobije, kulturo, druzenje s prijatelji, stik z VkIjuéi podporno znagko na svoj blog, spletno mesto, profil na programe namenjene otrokom, mladostnikom, starsem in 
naravo. 地 二 二 druzabnem omrezju in postani del rastote skupnosti. 二 地 地 pedagoskim delavcem. 地 二 于 

© CENTRU KAKO DO NAS SPREMLJAJ NAS PODPORNIKI 

Kdo smo? Kotnikova ulica 5, 1000 Ljubljana 贺 Fac Ok 





Aktualno 下 041233 474 加 二 


E: info@logo Linkedin 
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Copyrighs © MIN Corp. All Nehts everved 


(3 ) 快速 阅读 


资讯 图 表 化 主要 解决 了 信息 快速 预 贞 和 阅读 的 需要 。 快 速 直观 的 阅读 成 为 了 现代 资 
搞笑 、 图 片 类 的 资讯 更 为 人 们 所 接受 和 传播 一 样 。 很 少 人 愿意 静心 去 哈 长 篇 大 论 ， 所 以 资 
忌 结 的 表现 形式 。 另 外 对 于 那些 复杂 的 关系 和 比例 ， 纯 文本 是 很 难 表 达 的 ， 


为 了 一 种 很 好 的 沟通 万 式 。 
” 资讯 图 表 化 
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从 网 站 的 可 用 性 上 讲 ， 大 按钮 更 有 利 


于 网 站 辨识 


清晰 、 快 捷 访问 。 


讯 展示 的 基本 要 求 ， 正 如 视频 
分 讯 图 表 化 成 为 了 许多 信息 归 


yy 


人 、 


纳 


资讯 图 表 化 ， 以 其 简单 而 丰富 的 视觉 外 观 成 


县 体 方法 可 以 关注 本 书 之 前 《你 看 起 


来 很 好 吃 》 冬 


等 内 容 。 
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共 于 WinT 无 法 显示 法 多 


未 搞 拓 申 困 福 本 (让 系 抗 查 看 Al、CDR。PSD 撩 量 格 式 胃 片 ] 反 色 版 下 载 

东 坟 精 哮 图 补丁，2000 系 统 和 情 疝 厂 的 XIP 杞 没 丙 类 鸭 硬 功能 ! 合用 此 补丁 巡 夏 一 下 风琴 意 号 困 
了 41 可 补丁 无 痪 突 汪 其 她 居 储 ， 让 你 的 系 0 NN. EPS. COR. PSD 可 Pr 3 | 四 一 中 人 | 

Slide ed ey ?sp 春 嘻 图 补丁 可 以 把 PsD 格 式 的 文件 取 是 Pheseshep 的 专用 格式 以 摘 咯 图 的 形式 显示 出 未 ， 让 你 可 以 更 方便 的 看 图 访 国 管理 ， 看 名 页 轻松 。 

ArCDRrFH*EPS*PDF*PSD 了 丁 -支持 win7 64 亿 品 元 可 设计 

CDRrFHyPSD+PDFEPS 摘 障 图 冰 丁 是 社 这 常见 的 平面 设计 交 片 格式 阅 科 图 振 监 的 一 个 小 

补丁 ， 读 补丁 本 以 让 你 的 电脑 在 浴 有 安装 蘑 素 设计 软件 8[ 知 Photoshop 、CorDRAW) 

Www opew comypoR11169 him 2013-01.44 


了 botoshop 的 去 用 
PSDPDD 呈 Adobe 公 司 的 图 形 设计 软件 Pbotorhop 的 专 朋 格 式 ，PSD 文 件 可 以 存储 成 RGB 或 CMYK 模 式 . 
踏 径 等 信息 ， 是 目前 惟一 能 够 支持 全 妆 图 像 色彩 模式 的 格式 ， 恒 体积 应 大 ， 在 
office 系 列 。 但 像 浏览 中央 的 软 性 不支 持 。 它 的 功能 要 强 一些 。 

本 补 丁 由 桔子 (aD 制 作 





能 够 自 定义 颜色 元 并 加 以 存储 
平面 软件 内 部 可 以 通用 《如 cd si ae 等 ) ， 另 外 在 一 些 : 





还 可 以 保存 Pbotoshop 的 层 、 通 道 、 
它 共 型 编辑 软件 内 也 可 使 用 ， 例 如 








AHCDR+FH+PSD+PDFE+EPS 支持 win7 = gE 
该 醒 图 图 牢 丁 是 外 对 壳 见 的 冯 计 文昌 六 式 需 上 图 图 入 器 的 一 个 小 补丁 ， 访 和 衬 丁 司 以 证 你 的 克 及 在 没 
有 牢 著 某 可 设计 移 件 时 (Pholoshop 、CorelDRAW) 通 过 痊 移 图 床 大 概 祖 监 文件 的 

www bhil cervydomioad 3031 Hr 2011-12-24 


Photeshop PSD 文 性 搞 赂 困 补 丁 绿色 版 【直接 可 以 查看 Pad 内 容 4 下载 
Photoshop PSD 文件 萄 痢 图 补丁 接 色 版 了 闪失 可 以 查看 Pd 内容 让 Photoshop 的 PSD 文 件 声 光 
圈 补 丁 ， 适 用 于 目前 Pososhop 的 所 有 蛛 事 ( 钼 外 CS/CS2h 

Www downon comdowninfo /Gs2 html 2005-19.41 





1 解决 某 些 杀 理 软件 的 误 报 
2 解决 某 些 系 统 不 支持 的 问题 ， 
未 、 干 情 等 坊 哈 图 显示 。 


为 什么 看 不 到 六 骆 国 宛 百度 知道 

析 是 示 恋 文件 下 中 的 所 有 了 图片 。 3 单 击 " 责 看 " 护 恒 出 边 的 而 处 ， 如 后 入 动 性 志 以 更 改 所 局 匡 大 小 
还 本 以 打开- 计 基 机 ,窗口 。 扩 下 aa 调 。 在 随后 出 天 的 世间 多 上 点 击 

zhidao barduy com/quostion T6434 332 himi 2008.11.227 


更 和 百度 知 通 站 认 愉 关 精 果 * 


Photoshop PSD 文件 纺 腹 图 补丁 绿色 版 择 色 软 件 站 动态 版 
红色 钦 件 站 从 时 Phooshop PSD 文件 十 贡 所 朴 丁 境 色 所 免 观 下 载 ,各 们 的 示 局 是 届 型 、 失色、 免 
新 、 简单 、 易 用 、 名 用 

wwew onegraen notrSoAt_Show asp?SchiD=] 2006.10-09 


了 直 壹 咯 因 的 幸 天 - 困 片 搜索 帮助 

当 佘 使用 代理 服务 加 未 站 止 不想 看 到 科 内 容 时 ， 是 亚 也 状 望 避 扣 图 片 的 基础 泗 未 过 江 胃 片 折 党 丸 
保 中 的 信用 图 埠 和 也 在 您 只 各 术 宣 昌 片 的 小 尽 十 增 陷 阳 的 网 相 ， 偶 可 以 习习 地 

support google corvimages /nywee/169650 2013.0+.25 











相关 搜索 : pc 下 站 了 dr 村 天 让 本。 站 HT。 win7 ps 时 生生 。 篇 喇 图 不 旺 示 安信 名 
[es "AHR I BH 了 显示 ps 国 | TT Win7 Xin7 沪 由 这 显 未 


5 区 了 本 





这 是 一 种 结合 设计 形式 感 的 
缩 略 图 展示 方式 ， 它 将 进一步 的 
文字 说 明 内 容 隐 藏 在 图 片 中 ， 当 
图 片 被 选择 后 ,鼠标 经 过 才 会 触 
上 详细 资料 的 显示 ， 使 画面 更 加 
简洁 并 具有 形式 美感 。 





过 去 我 们 只 能 通过 点 击 链 
接 才 能 看 到 网 页 的 内 容 ， 现 在 
你 只 需 点 击 放 大 镜 然 后 将 鼠 
标 悬 停 在 链接 上 束 可 以 预 筑 该 
链接 的 网 页 内 容 。 这 个 趋势 从 
2011 年 开始 ， 互 联网 用 户 变 得 
更 加 精明 ， 他 们 更 希望 看 到 更 
多 人 性 化 的 导航 设计 。 


一 
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附 录 


” 单 页 布局 


单 页 布局 具有 较 好 的 视觉 集中 化 的 连贯 性 ， 可 以 强化 主题 逻辑 性 和 主体 表达 。 


NAVER 
= 
















Hlolt| | 怪 2381 
wk 上 3 2 寻 刘 已 旺 呈 

| NAVER 

和 TAIzb 2 人 zt 享 吕 MRIE 2 

| 外 Az+ 刀 从 会 四 Hold Ceki 妈 呈 和 姑 剧 三 ， 


09.08 .号 ) 对 早 30"C 全 7 有 HH 人 27H| 
在 稼 企 昼 玫 " 寻 早 对 村 放 舍 臣 岂 雪 思 齐 邮 " 
计 早 卫 吕 对 龟 型 过 3| 对 019| bl 刚 
亿 逢 对 音 呈 番 全 计 计生 外 时 到 ch-400 量 舍 大 | 
导 | 村 型 土 对 ,等 引 下 到 74 型 如 J| 105%6 型 划 叶 





到 PHO|CH' 于 号 簿 " 早 岂 ,时 总 全 忌 0jzIch 


| :2 ® : 


开 时 中 对 寻 12 人 AI。 中 三 忌 0|E 会 号 促 7 博世 旨 
有 音 个 Hed 瑟 宙 对 习 E 











http://campaign.navercom/nNewnaverapp_event 


这 个 页 面 的 交互 很 有 意思 ， 它 通过 内 容 滚屏 形式 对 应 到 手机 上 的 相应 功能 ， 达 到 直观 可 视 的 效果 。 单 
页 布局 形式 十 分 适用 于 这 种 中 心 单一 明确 的 主题 。 


4. 品 牌 站 细 分 设计 
钢 频 、 泛 娱乐 


形式 多 样 化 、 多 媒体 化 
A 


品牌 建设 





随 着 技术 友 展 ， 多 媒体 的 瑟 动 形式 被 网 站 设计 所 支持 ， 品 牌 站 从 资讯 式 的 企业 网 站 中 分 离 出 来 ， 形 成 了 独立 的 营销 
路 线 ， 如 何 将 产品 从 视觉 和 概念 上 深入 人 心 成 为 了 品牌 站 的 首要 责任 。 
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形式 感 + 区 页 视觉 设计 创意 拓展 与 快速 表现 


(1) 多 媒体 化 视觉 表现 





(2 ) 多 样 化 互动 形式 


We use cookies to make your experience better on this website 
By chcking any Ink on this page you are gying your consent for us to do this. 


日 时 享 昌 中 其 


在 网 速 、 硬 件 和 技术 不 断 革 
新 的 时 代 ， 更 丰富 的 视 狗 体验 会 
进一步 帮助 网 站 品牌 视觉 的 建设 ， 
而 电子 产品 的 泛 娱 乐 化 也 逐渐 受 
到 推 款 ,或许 一 个 更 生活 和 综合 
的 插 管 时 代 即 将 来 临 。 





ED 结合 手机 、 报 像 头 、 音 频 等 技术 形成 更 多 样 





-KKK 





SA | 化 的 互动 形式 体验 将 被 人 们 更 加 热衷。 








mm es Le | 
Get your 
football kit 
二 _ 
fand collect 
sport goodies! 














So 人 WHAT A CARTDOM 


小 结 








网 站 设计 的 演化 受到 了 技术 的 限制 和 支持 。 视 客 设 计 需 要 从 切实 的 功 自 on i li 如 何 实 现 





更 加 精准 展 好 的 网 络 整合 营销 体验 是 我 们 未 来 的 万 同 。 做 为 营销 整合 战场 中 的 





部 分 ， 关 注 整 体 的 营销 环境 是 必须 的 。 


也 希望 由 此 立足 点 出 友 能 够 使 未 来 的 视觉 设计 更 加 行 之 有 效 ， 并 一 起 配合 推动 产 品 更 过 上 的 市 场 运营 和 推广 。 
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设计 中 的 “好 有 爱 ” 

“有 爱 " 是 英雄 主 义 的 审美 突围 ， 是 体贴 入 微 的 人 文 天 怀 。 

伴随 着 物质 生活 逐渐 被 满足 ,人 们 在 精神 上 对 爱 的 渴求 不 断 增 加 ,上 有 向 权 威 接 
近 的 渴 性 ， 下 有 对 生活 细节 的 温情 ， 而 这 些 渴求 渐渐 延伸 出 几 种 对 爱 的 表达 和 宣泄 ， 
情 守 初 开 的 小 LOLI, 与 上 司 的 一 场地 下 恋情 ,还 有 来 目 母 杀 最 无 私 体贴 的 关怀， 无 
不 让 我 们 感到 放松 和 温情 。 今 天 我 们 残 来 说 说 天 于 爱 ， 天 于 "好 有 爱 "。 





一 、“2” 英雄 主义 审美 的 “有 爱 ” 突 国 





第 一 点 由 希望 向 权威 杀 近 而 演变 来 的 有 爱 ， 妇 然 不 能 向 上 司 靠 扰 ， 那 束 让 上 司 向 我 们 靠拢 吧 。 


首先 来 定义 一 下 这 里 的 “有 爱 ”， 在 有 ”13 的 基础 上 妆 “272 有 爱 ' 也 。 


何 为 "3”? 何 为 "2”? 我 们 从 《 杜 拉 拉 升 职 记 》 中 的 " 王 伟 “ 说 起 ， 一 个 世界 百 强 企业 的 金牌 销售 总 监 ， 平 日 中 工作 作 
风 强 势 有 果断， 是 许多 女性 仰 葵 的 对 象 ， 在 一 次 偶然 的 名 逅 中 被 " 杜 拉 拉 " 友 现 他 有 害怕 乘 电 梯 的 小 怪 疝 。 在 印尼 的 一 次 " 逃 
离 " 事 件 中 ， 祥 现 平日 一 身 肃 妆 严谨 打扮 的 leader， 在 脱 去 外 衣 后 穿 的 竟 吓 一 条 星星 蝴蝶 的 可 爱 梦 幻 蓝 内 裤 。 原 来 铁 面 冷 
脸 的 背后 ， 竟 也 有 这 些小 怪癖 。 其 中 的 " 王 伟 "在 公司 以 及 女性 中 的 地 位 为 "13”， 害 怕 坐 电梯 ”和 ”小 监 化 内 裤 ' 则 为 2” ,而 
这 两 点 的 反差 集中 在 一 个 人 身上 则 形成 了 “有 爱 “。 "有 爱 ' 也 成 为 了 有 着 身 份 悬殊 爱情 的 垫 脚 石 。 


从 营销 角度 看 ,这 种 有 爱 减 少 的 是 抗拒 感 和 落差 感 ,成 为 产品 宣传 中 的 一 种 轻松 调剂 。 一 些 希望 被 大 众 接 受 的 高 科技 、 
大 品牌 、 新 型 的 产品 也 采用 这 种 反 其 道 而 行 的 方式 来 拉 近 距离 。 比 如 LV 的 日 系 可 爱 包 ， 美 宝 莲 用 了 曾 亦 可 代言 BB， 这 
算是 品牌 担心 权威 所 带 来 的 产品 老龄 化 或 装 "13" 的 产品 印象 ， 从 而 在 适当 时 候 装 2" 以 获取 审美 的 突围 ， 给 人 以 亲民 感 的 
营销 手段 。 


下 面 咱们 来 看 看 网 页 中 的 "有 爱 “ 表 现 。 
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形式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





左下 图 为 所 谓 的 "13”, 右 下 图 为 所 谓 ”2 ,特种 部 队 在 剃 人 眼中 是 无 四 、 英 勇 、 冷 静 的 ， 而 右 下 图 则 呈现 了 他 们 在 严 
寒 中 冻 得 直 济 时 涕 打 颤 的 形象 ， 让 我 想起 了 早年 成 龙 为 有 别 于 李小龙 企 人 们 眼中 功夫 英雄 的 形象 而 独创 了 成 龙 式 的 电影 
功夫 角色 ,这 种 杀 民 的 2 抽雄 形象 也 得 到 了 娱乐 界 ,电影 界 和 大 众 的 高 度 认 可 ， 而 2 英雄 包 算 是 对 正统 天 雄 主 义 的 一 种 审 


美 突 围 。 
KG 


型 强 O01H04 本 01 和 至 大 qi2l 
KOREA @-SPOATS GAMES 

















pf 


b} 有 
1 1S 、 1 ‘< 
ULSPECIAL Sx 上 


基于 英雄 主义 表现 方式 





'2 英雄 的 “有 爱 ' 表现 


任何 脱 匈 了 主题 的 表现 都 是 空洞 的 ， 下 面 我 们 结合 情境 来 看 看 我 们 的 “有 爱 ' 英 雄 。 


1.“ 有 爱 ” 的 基本 形态 


CDIiicilc 


员 训 Oe 扰民 HO 旦 居 AIEalOl 
对 时 笃 tI8% 合 LICh 





虽 们 来 看 看 "C9" 的 一 周岁 生日 专题 页 面 ， 头 戴 彩色 礼帽 ， 围绕 生日 淖 糕 的 瑞 难 们 ， 还 有 在 幕后 探 出 脑袋 的 怪 午 ，“ 可 
爱 无 公害 "的 样子 为 "有 爱 ' 的 单 态 ， 场 景 的 变化 ， 配 饰 转换 、 表情 和 意外 情境 的 相互 配合 都 可 以 构建 出 有 爱 的 形态 。 


附 录 


1K 1 TH MA 
叫 昌 天 噶 番台 01 帮 辽 OBIXI 妈 音 剑 早 便 刻 轩 研 登 周到 二 半 们 | 三 登 天 个 全 中 中 SF 8171 0101 狠 对 号 全 号 呈 
0 0| 癸 量 有 盐 让 如 妈 旨 5 对 骂 7| 尘 鞭 休 多 合 LICH. 0| 因 瑟 川 震 0 对 起 天 知 本 笠 便 加 震 平 乔 盐 村 号 丘 三 车 UL 叶 . h | 


ii A LA 
St ota at 汪 


pw U91 寺 气 010 名 > 0| 加 各 尹 亚 芋 7| > 


-六 型 观 7IK| 党 下 中 雪 基 用 个 

















?190 * oF go me | 0 出 时 "PP 


via voit ve vi 





家 的 专题 活动 页 面 ， 设 计 师 抛 并 了 传统 冷 面 酷 脸 ， 换 用 Q 版 特种 兵 ， 坚 角 的 汗 珠 ， 
j 英 雄 在 非 专 业 情 境 下 的 认真 可 爱 ， 让 瑞 雄 平民 化 一 同 为 科 善 添 传 加 瓦 ， 
轻松 有 趣 。2 化 的 万 式 适合 在 " 非 专 业 “ 情 景 下 做 为 点 缀 ( 如 


, 如 果 在 “专业 "上 也 用 2 化 表现 ， 那 也 便 真 2 了 。 


合 八 认 比 
下 仁 会 么 车 乱 兰 家 


还 有 人 , 都 让 人 感 至 
也 使 大雄 的 形象 更 条 民 ， 让 非 战场 的 活动 系 围 显得 
节日 、 人 送礼、 慈善 等 不 属于 瑞 礁 专业 范畴 的 活动 ) 





3.“ 有 爱 ” 的 平民 化 消费 


> Of 72F:201. 824 0 2 S| 4 





这 是 一 个 '" 回 玩家 狂 友 游戏 筹码 "的 活动 ,所 有 人 都 可 以 参与 并 获得 奖品 ，2 化 表达 与 平民 化 消费 一 担 即 合 


过 十 
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引 式 感 + 网 页 视觉 设计 创意 拓展 与 快速 表现 





二 、 体 贴 化 的 “有 爱 ” 表 现 


亲切 生活 化 的 有 爱 表现 ， 区 别 于 将 权威 2 化 的 有 爱 ， 它 源 于 人 们 心计 对 母爱 的 渴求 ， 被 保护 关心、 被 体贴 的 淘 望 。 
左下 图 为 一 般 的 商业 化 网 页 ， 以 表达 其 专业 为 主 ， 在 给 予 产 品 高 度 的 同时 也 产生 了 距离 感 。 右 下 图 为 生活 化 的 有 爱 ' 表 达 ， 
用 了 杀 笔 手绘 " “员工 现场 操作 等 生活 化 的 表现 形式 ， 犹 如 残 在 你 身 和 旁 为 你 量 身 定制 一 款 专 属 你 的 产品 一 般 ， 大 面积 的 笠 
面 版 式 " 颠 覆 了 传统 网 页 横 平 竖 直 的 方式， 画面 显得 轻松 活跃 ， 昌 牺牲 庄严 感 可 能 市 来 的 专业 感 ， 但 却 能 为 产品 的 人 性 化 
表现 增添 许多 亮色 。 
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1. 有 爱 在 有 爱 活动 中 的 合理 表达 
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A/E/IHNY Summer special EVENT!! 


剖 AF7| 熙 :2010 革 i 6 嵌 7 包 ~ 8 和 钳 20 归 。 识 和 | 划 品 : 人 EH 到 错 引 人 EE, 人 EI 到 | 副 0| 千 凡人 EI 到 | 之 2|X| 导 


让 人 | 到 出 ME 过 导出 豆 量 电 习 寺 MI2. 车 OK 午 列 ol 才 100% 必 到 时 莘 9| 7| 副 旱 三 必 LIC}. Eo 了 kx 
OIE Oo{E www.yakult.co.kr EE www,santafeillust.co.kr OA 对 0 本 KAI. 





这 是 一 个 飞行 游戏 与 饮料 厂商 合作 的 广告 专题 页 ，“ 喝 饮料 ， 拿 道具 "。 冬 贴 的 大 标语 、 邮 截 、 手 写字 ， 让 
人 感受 有 吃 有 玩 有 奖 的 欢乐 轻松 气氛 。 
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附 录 


2. 有 爱人 在 无 爱 产 品 中 的 品牌 暖 化 


+ 叫 c| 秋 言 到 0IK 十 人 委 对 中 这 到 OK| 





San! 85 En! OY 
到 8| | -| sh 从 | 去 二 人 |E| 宇 | 并] 天 | 叶 氏 号 jj 人 | 全 局 上 竺 召 乔 J( | ~ 4 
人 由 则 荐 全 0| 号 名 个 号 寺 革 7 0 


Cl 


ont 


bel: 308 


2010/09/01 ~ 2010/09/19 A 
Eyrer 强 2010/10/01 ( ollc| 杰 总 oIx| 如 x|) me 





这 是 一 个 "创可贴 "的 广告 ， 不 识 韩文 的 朋友 可 能 误 以 为 是 家 族 聚 会 或 咖啡 广告 ， 男 面 中 的 咖啡 、 超 人 “， 还 有 Q 版 的 
明星 伙伴 ， 给 予 了 冰冷 药品 以 轻松 、 安 全 、 欢 乐 的 气氛 ， 远 离 疼痛 的 冷酷 ， 感 受到 了 欢乐 和 健康 的 "有 爱 " 氛 围 。 





BE Fs 

哆 喇 了 这 些 关 于 爱 的 表现 之 后 ,我 咏 明 些 天 于 拉 巧 的 学 习 ， 中 国人 在 讨 巧 的 经 验 学 习 和 技法 抄 秦 中 错过 
了 很 多 体验 。 拿 审 壬 的 表现 来 说 ， 任何 一 种 视 完 消费 都 可 能 产生 相应 的 疲 芳 。 从 " 春 哥 "到 "凤姐 " 青 到 "小 月 月 ”， 
近年 的 审美 突围 ， 在 扭曲 的 速 食 中 快速 兴起 、 又 很 快 灭 志 ， 王 干 万 万 人 一 哄 而 上 ， 又 一 哄 而 散 "。 在 技巧 和 方 
式 速 食 的 路 上 让 我 们 回头 看 看 ， 我 们 在 " 爱 "的 路 上 又 真正 走 了 多 远 ? 
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用 设计 说 话 


///111111/ 站 酷 网 页 设计 会 员 && 内 容 推荐 \\\\\\\N\ 





站 酷 网 的 200 万 名 设计 师 会 员 中 ，1/10 从 事 网 页 设计 。 
这 其 中 ， 有 很 多 我 们 熟悉 的 名 字 : 

一 视觉 ( 晋 小 背 ) ” 影 天 欧 ( Insky ) ” 亦 天 ( 冯 铁 ) kaven ( 韩 雪 冬 ) ”记忆 拼图 ( 曾 电 ) woser ( 浦 露 ) 

韩 冰 云 ( 韩 冰 云 )” 阿 新 I ( 任 星星 )” 孔 从 (Pavowang ) gj3630355 ( 郭靖 ) jzyart ( 塌 哲 洋 ) …… 


还 有 很 多 你 莫名 的 设计 团队 : 


TGideas 腾讯 ECD 畅游 YC 百度 MUX 360UXC 新 沪 uxd 网 营 UED UElike …… 


E33 -YY- AL 一 
有 大 量 值得 学 习 的 网 页 设计 文章 
【快速 打造 网 页 形式 感 技巧 系列 】 300000+ 人 气 “本 书 的 诞生 正 是 源 自 该 系列 教程 ， 是 该 系列 的 细 化 和 深入 。 
【设计 基础 教程 -构图 篇 】 170000+ 人 气 
【 墨 点 抽 离 技法 表现 教程 】 160000+ 人 气 
【网 页 配色 的 天 然 范 儿 】 130000+ 人 气 
【打造 炫 光 场景 】 130000+ 人 气 
【网 页 导航 的 质感 运用 技巧 】 100000+ 人 气 


还 有 每 天 300+ 最 新 原创 网 页 设计 作品 持续 发 表 。 
在 站 酷 开 始 你 的 网 页 设计 之 旅 。 

与 2,000,000+ 设 计 师 们 一 起 交流 设计 。 

和 人 ”~ 扫 一 下 进入 站 酷 网 





Www.zcool.com.cn 


看 元 了 


如 果 您 对 本 书 内容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 译 者 协助 
答疑 。 也 可 访问 图 灵 社 区 ， 人 参与 本 书 讨论 。 


如 果 是 有 天 电子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : ebook@turingbook.com。 
在 这 里 可 以 找到 我 们 : 


微 博 @ 图 灵 教 育 : 好 书 、 活 动 每 日 播报 

微 博 @ 图 灵 社 区 : 电子 书 和 好 文章 的 消息 

微 博 @ 图 灵 新 知 : 图 灵 教 育 的 科普 小 组 

微 信 图 灵 访 谈 : ituring_interview， 讲 述 码 农 精彩 人 生 
微 信 图 灵 教 育 : turingbooks 


